From 6d6fa145ccef5867bd4bb84de44e99ae6c8a7a72 Mon Sep 17 00:00:00 2001
From: vighneshbhat9945 <153224120+vighneshbhat9945@users.noreply.github.com>
Date: Fri, 26 Jan 2024 04:46:00 +0530
Subject: [PATCH] css: Make the height of compose buttons steady.

When any stream name includes some other language's letters is scrolled down in
the recent views, the height of compose-controls bar would change.

Fix this by setting a precise line-height for these elements.

Fixes: #27837.
---
 web/styles/compose.css | 4 +++-
 web/styles/zulip.css   | 7 +++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/styles/compose.css b/web/styles/compose.css
index 903d822c8c..0b0e2a4837 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -16,7 +16,7 @@
             & span {
                 font-size: 1.2em !important;
                 font-weight: 400;
-                line-height: 1em;
+                line-height: var(--line-height-compose-buttons);
             }
         }
     }
@@ -53,6 +53,7 @@
             border: none;
             background: var(--color-compose-embedded-button-background);
             border-radius: 3px;
+            line-height: var(--line-height-compose-buttons);
         }
 
         #left_bar_compose_reply_button_big {
@@ -93,6 +94,7 @@
     #new_conversation_button,
     .new_direct_message_button_container {
         flex-shrink: 0;
+        line-height: var(--line-height-compose-buttons);
 
         @media (width < $sm_min) {
             /* Override inline style injected by jQuery hide() */
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index eb4006a07a..228fa95354 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -172,6 +172,13 @@ body {
     */
     --max-unexpanded-compose-height: 40vh;
 
+    /*
+    Line height of the message buttons in compose box. Here it's necessary
+    to control this value uniformly and precisely to avoid issues with
+    layout shifts originating with non-Latin characters in this area.
+    */
+    --line-height-compose-buttons: 20px;
+
     /*
     Maximum height of the subscribers list in stream settings so that
     it doesn't cause the container to have a second scrollbar.