From 2ed1465b048dd449202516ee29d1fabde978b7bd Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Sat, 30 Sep 2023 10:56:04 +0000
Subject: [PATCH] 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           | 22 ++++++++--------------
 web/templates/message_body.hbs |  8 ++++----
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index a8a3c3a884..71c16b27d0 100644
--- a/web/styles/zulip.css
+++ b/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%;
diff --git a/web/templates/message_body.hbs b/web/templates/message_body.hbs
index 7b4fc2108d..f1ecfe2eaa 100644
--- a/web/templates/message_body.hbs
+++ b/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>