[FIX] Auto complete user suggestions (#18437)

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

app/theme/client/imports/general/base_old.css

@@ -1962,9 +1962,26 @@
 }
 
 .rc-old .popup-user-not_in_channel {
-	display: inline-block;
+	overflow: hidden;
 
-	float: right;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.rc-old .popup-user {
+	display: flex;
+	align-items: center;
+
+	&-avatar_wrap,
+	&-name {
+		margin-right: 4px;
+		flex-shrink: 0;
+	}
+}
+
+.rc-old .popup-user-notice {
+	min-width: 0;
+	margin-left: auto;
 }
 
 .rc-old .popup-user-status {

app/ui-message/client/popup/messagePopupUser.html

@@ -1,13 +1,21 @@
 <template name="messagePopupUser">
-	{{#unless system}}
-		<div class="popup-user-status border-transparent-dark popup-user-status-{{status}}"></div>
-		<div class="popup-user-avatar" style="background-image:url({{avatarUrlFromUsername username avatarETag}});"></div>
-	{{/unless}}
-	<strong>{{username}}</strong> {{name}}{{#if nickname}} ({{nickname}}){{/if}}
-	{{#if outside}}
-		<div class="popup-user-not_in_channel">{{_ "Not_in_channel"}}</div>
-	{{/if}}
-	{{#if suggestion}}
-		<div class="popup-user-not_in_channel">{{_ "Suggestion_from_recent_messages"}}</div>
-	{{/if}}
+	<div class="popup-user" title="{{#if outside}}{{_ 'Not_in_channel'}}{{/if}} {{#if suggestion}}{{_ 'Suggestion_from_recent_messages'}}{{/if}}">
+		{{#unless system}}
+		<div class="popup-user-avatar_wrap">
+			<div class="popup-user-status border-transparent-dark popup-user-status-{{status}}"></div>
+			<div class="popup-user-avatar" style="background-image:url({{avatarUrlFromUsername username avatarETag}});"></div>
+		</div>
+		{{/unless}}
+		<div class="popup-user-name">
+			<strong>{{username}}</strong> {{name}}{{#if nickname}} ({{nickname}}){{/if}}
+		</div>
+		<div class="popup-user-notice">
+			{{#if outside}}
+				<div class="popup-user-not_in_channel">{{_ "Not_in_channel"}}</div>
+			{{/if}}
+			{{#if suggestion}}
+				<div class="popup-user-not_in_channel">{{_ "Suggestion_from_recent_messages"}}</div>
+			{{/if}}
+		</div>
+	</div>
 </template>