From a29009b4d973d5c1c30128508c8785779ac8c1e9 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Mon, 3 Oct 2022 15:49:39 +0000
Subject: [PATCH] realm_user_settings: Fix user status with emoji preview.

Fixed to reflect how user status with emoji will be displayed
in the right sidebar.
---
 static/styles/right_sidebar.css | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/static/styles/right_sidebar.css b/static/styles/right_sidebar.css
index 99eda141de..cef6f929af 100644
--- a/static/styles/right_sidebar.css
+++ b/static/styles/right_sidebar.css
@@ -1,3 +1,6 @@
+/* Width of emoji used by user to display status. */
+$user_status_emoji_width: 24px;
+
 .right-sidebar {
     a:hover {
         text-decoration: none;
@@ -115,7 +118,7 @@
 }
 
 .user-presence-link {
-    width: calc(100% - 24px);
+    width: calc(100% - $user_status_emoji_width);
 
     .status_emoji {
         top: 9px;
@@ -130,6 +133,31 @@
     cursor: pointer;
 }
 
+.user_list_style_values {
+    .user-name-and-status-emoji {
+        display: block;
+        width: 100%;
+        height: 20px;
+
+        .user-name {
+            display: inline-block;
+            max-width: calc(100% - $user_status_emoji_width);
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .status_emoji {
+            line-height: 20px;
+            top: -2px;
+        }
+    }
+
+    .status-text {
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
 .user_sidebar_entry {
     display: flex;
     align-items: flex-start;