components/Avatar.vue

@@ -4,6 +4,7 @@
 		:src="displayAvatar"
 		:alt="displayName" />
 	<DefaultIcon v-else-if="user"
+		class="display-avatar"
 		:name="displayName"
 		:seed="user.uuid"
 		:alt="displayName" />

components/DefaultIcon.vue

@@ -38,6 +38,9 @@ if (props.name.length > 3) {
 }
 
 .default-icon-text {
+	/* helps centre the icon, yes, this is NOT perfect */
+	margin-top: -0.15em;
+
 	font-weight: bold;
 
 	color: var(--secondary-text-color)

components/Guild/MemberEntry.vue

@@ -30,4 +30,11 @@ const hidePopup = () => {
 .member-item {
     position: relative; /* Set the position to relative for absolute positioning of the popup */
 }
+
+.member-avatar {
+    min-height: 2em;
+	max-height: 2em;
+	min-width: 2em;
+	max-width: 2em;
+}
 </style>

components/Message.vue

@@ -220,7 +220,10 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 
 .message-author-avatar {
-	width: 100%;
+	min-height: 2em;
+	max-height: 2em;
+	min-width: 2em;
+	max-width: 2em;
 }
 
 .left-column {