From fbfc72cb0572cb5cb5f9b4c53771f4a3924c709e Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@stolley.dev>
Date: Tue, 4 Apr 2023 16:03:12 -0500
Subject: [PATCH] emoji: Display status emoji as inline-flex in sender row.

With no existing class to reach this selector, this change
introduces a new `.inline-status-emoji` class on the Handlebars
template and in the main Zulip CSS file.

Because of the inline styling in the message sender row, this
specific instance of a status emoji needs to be presented as
an inline flex: that keeps the avatar image layout clean, while
also introducing the `align-self: center` vertical positioning
of the status emoji adjacent the username, which is itself a
bare text node.
---
 web/styles/zulip.css           | 13 +++++++++++++
 web/templates/message_body.hbs |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 06ebd2ded8..26c4f1287a 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -2655,6 +2655,19 @@ 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 1ecfd73635..51703382de 100644
--- a/web/templates/message_body.hbs
+++ b/web/templates/message_body.hbs
@@ -4,7 +4,7 @@
 <span class="message_sender no-select">
     {{#if include_sender}}
         <span class="sender_info_hover sender_name auto-select" role="button" tabindex="0">
-            <span class="view_user_card_tooltip" data-tooltip-template-id="view-user-card-tooltip-template">
+            <span class="view_user_card_tooltip inline-status-emoji" data-tooltip-template-id="view-user-card-tooltip-template">
                 {{msg/sender_full_name}}
                 {{#unless status_message}}
                 {{> status_emoji msg/status_emoji_info}}