Fix mentions layout

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

css/At.scss

@@ -125,7 +125,7 @@
 	// Override autocompletion panel items height, as they are too short
 	// for the avatars and also need some padding.
 	.atwho-li {
-		height: 48px;
+		height: 64px;
 		padding-top: 4px;
 		padding-bottom: 4px;
 	}
@@ -134,8 +134,8 @@
 	// is the default 16px. This is a temporary fix until it is fixed
 	// in the avatar component.
 	.atwho-li .icon-group-forced-white {
-		width: 32px;
-		height: 32px;
+		width: 44px;
+		height: 44px;
 	}
 
 	// Override all colors with our theming and dark mode

src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue

@@ -30,6 +30,7 @@
 		@at="handleAtEvent">
 		<template v-slot:item="scope">
 			<Avatar v-if="isMentionToAll(scope.item.id)"
+				:size="44"
 				:icon-class="'icon-group-forced-white'"
 				:disable-tooltip="true"
 				:disable-menu="true"
@@ -40,6 +41,7 @@
 				{{ getFirstLetterOfGuestName(scope.item.label) }}
 			</div>
 			<Avatar v-else
+				:size="44"
 				:user="atRemoveQuotesFromUserIdForAvatars(scope.item.id)"
 				:display-name="scope.item.label"
 				:disable-tooltip="true"
@@ -337,9 +339,9 @@ export default {
 
 		getGuestAvatarStyle() {
 			return {
-				'width': '32px',
-				'height': '32px',
-				'line-height': '32px',
+				'width': '44px',
+				'height': '44px',
+				'line-height': '44px',
 				'background-color': '#b9b9b9',
 				'text-align': 'center',
 			}
@@ -391,12 +393,13 @@ div[contenteditable] {
 
 .mention-suggestion {
 	max-width: 250px;
+	padding-left: 8px;
 
 	.user-status {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		display: block;
-		margin-top: -5px;
+		margin-top: 2px;
 	}
 }