css: Display status emoji along with overflowing sender names.

Even if sender name overflows the available space, we should
show status emoji along with sender name by hiding the overflowing
part of sender name.

web/styles/zulip.css

@@ -1720,9 +1720,16 @@ td.pointer {
 }
 
 .sender_name {
-    display: inline-block;
+    display: inline-flex;
     font-weight: 700;
     color: var(--color-text-sender-name);
+    column-gap: 3px;
+
+    .sender_name_text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 }
 
 .sender_name_hovered {
@@ -2657,19 +2664,6 @@ select.invite-as {
     margin-right: 0;
 }
 
-.inline-status-emoji {
-    /* Treat as an inline flex container, with an anonymous block around
-      the username text node, for positioning status emoji */
-    display: inline-flex;
-
-    .status-emoji {
-        /* Preserve the distance between the emoji
-           and username that was previously due to
-           whitespace. */
-        margin-left: 6px;
-    }
-}
-
 /* FIXME: Combine this rule with the one in portico.css somehow? */
 #pw_strength {
     width: 100%;

web/templates/message_body.hbs

@@ -4,12 +4,12 @@
 <span class="message_sender">
     {{#if include_sender}}
         <span class="sender_info_hover sender_name" role="button" tabindex="0">
-            <span class="view_user_card_tooltip inline-status-emoji" data-tooltip-template-id="view-user-card-tooltip-template">
+            <span class="view_user_card_tooltip sender_name_text" data-tooltip-template-id="view-user-card-tooltip-template">
                 {{msg/sender_full_name}}
-                {{#unless status_message}}
-                {{> status_emoji msg/status_emoji_info}}
-                {{/unless}}
             </span>
+            {{#unless status_message}}
+            {{> status_emoji msg/status_emoji_info}}
+            {{/unless}}
         </span>
         {{#if sender_is_bot}}
         <i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>