From 01d079d98c9c48a6d0bd436f34de8d1da9be253e Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Tue, 3 Jan 2023 10:30:39 -0800
Subject: [PATCH] UX: Add flex container and use baseline alignment for text
 based items

---
 .../templates/user-selector-autocomplete.hbr  | 39 +++++++++++--------
 .../stylesheets/common/base/compose.scss      |  9 ++++-
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/user-selector-autocomplete.hbr b/app/assets/javascripts/discourse/app/templates/user-selector-autocomplete.hbr
index 90db6c3907..9ac0718885 100644
--- a/app/assets/javascripts/discourse/app/templates/user-selector-autocomplete.hbr
+++ b/app/assets/javascripts/discourse/app/templates/user-selector-autocomplete.hbr
@@ -1,22 +1,27 @@
-<div class='autocomplete ac-user'>
+<div class="autocomplete ac-user">
   <ul>
     {{#each options.users as |user|}}
       <li>
         <a href title="{{user.name}}" class="{{user.cssClasses}}">
           {{avatar user imageSize="tiny"}}
-          <span class='username'>{{format-username user.username}}</span>
-          {{#if user.name}}
-            <span class='name'>{{user.name}}</span>
-          {{/if}}
-          {{#if user.status}}
-            {{emoji user.status.emoji}}
-            <span class='status-description' title='{{user.status.description}}'>
-              {{user.status.description}}
-            </span>
-            {{#if user.status.ends_at}}
-              {{format-age user.status.ends_at}}
+          <div class="ac-user--metadata">
+            <span class="username">{{format-username user.username}}</span>
+            {{#if user.name}}
+              <span class="name">{{user.name}}</span>
             {{/if}}
-          {{/if}}
+            {{#if user.status}}
+              {{emoji user.status.emoji}}
+              <span
+                class="status-description"
+                title="{{user.status.description}}"
+              >
+                {{user.status.description}}
+              </span>
+              {{#if user.status.ends_at}}
+                {{format-age user.status.ends_at}}
+              {{/if}}
+            {{/if}}
+          </div>
         </a>
       </li>
     {{/each}}
@@ -25,8 +30,8 @@
       {{#each options.emails as |email|}}
         <li>
           <a href title="{{email.username}}">
-            {{d-icon 'envelope'}}
-            <span class='username'>{{format-username email.username}}</span>
+            {{d-icon "envelope"}}
+            <span class="username">{{format-username email.username}}</span>
           </a>
         </li>
       {{/each}}
@@ -37,8 +42,8 @@
         <li>
           <a href title="{{group.full_name}}">
             {{d-icon "users"}}
-            <span class='username'>{{group.name}}</span>
-            <span class='name'>{{group.full_name}}</span>
+            <span class="username">{{group.name}}</span>
+            <span class="name">{{group.full_name}}</span>
           </a>
         </li>
       {{/each}}
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 76e835deb7..cf987aa29d 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -434,13 +434,20 @@ html.composer-open {
           }
         }
 
+        .ac-user--metadata {
+          display: flex;
+          align-items: baseline;
+          gap: 0.25rem;
+        }
+
         .avatar {
           margin-right: 0.25em;
         }
 
         .name {
-          display: contents;
           font-size: var(--font-down-1);
+          padding: 0;
+          margin: 0;
           color: var(--primary-high);
         }