user_names: Display users and status emoji inline in recents, inbox.

Fixes #29778

web/styles/app_components.css

@@ -600,6 +600,21 @@ input.settings_text_input {
     }
 }
 
+.user_status_icon_wrapper {
+    display: inline;
+    white-space: nowrap;
+}
+
+.user-status-microlayout {
+    display: inline-grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+
+    .user-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
 /* We are mostly consistent in how we style
    unread counts, except for starred messages.
    This is the common section.

web/styles/inbox.css

@@ -291,7 +291,9 @@
                 }
 
                 .inbox-left-part {
-                    grid-template: auto / min-content auto min-content min-content;
+                    grid-template:
+                        auto / min-content minmax(0, 1fr)
+                        min-content min-content;
                     grid-template-areas: "match_topic_and_dm_start recipient_info unread_mention_info unread_count";
                 }
 
@@ -420,7 +422,6 @@
                     flex-wrap: wrap;
                     column-gap: 10px;
                     grid-area: recipient_info;
-                    word-break: break-word;
 
                     .user_block {
                         display: flex;

web/styles/recent_view.css

@@ -78,6 +78,10 @@
         }
     }
 
+    .white-space-preserve-wrap {
+        word-break: break-word;
+    }
+
     .empty-table-message {
         background-color: var(--color-background);
         padding: 3em 1em;
@@ -463,14 +467,6 @@
     .recent_topic_name {
         width: 40%;
 
-        & a {
-            word-break: break-word;
-            /* No hyphes for word break since it caused hyphens to appear before
-                the ellipsis `longText-...` which is not desirable. Ellipsis appears due
-                to the line clamp applied below.
-            */
-        }
-
         .line_clamp {
             /* This -webkit-box display property is webkit-specific, but
                 it appears that line clamping works fine for this component
@@ -539,12 +535,6 @@
                 position: unset;
             }
         }
-
-        .user_status_icon_wrapper {
-            /* Keep status emoji with usernames,
-               and better vertically align the emoji. */
-            display: inline-flex;
-        }
     }
 
     .stream-privacy .zulip-icon {

web/templates/user_with_status_icon.hbs

@@ -1,5 +1,9 @@
 <span class="user_status_icon_wrapper">
-    <span class="user-name">{{name}}</span>
+    <span class="user-status-microlayout">
-    {{~> status_emoji status_emoji_info ~}}
+        <span class="user-name">{{name}}</span>
+        {{~!-- --~}}
+        {{~> status_emoji status_emoji_info ~}}
+    </span>
+    {{~!-- --~}}
 </span>
 {{~!-- --~}}