From 1ba3cda22950fac965111c9099d9b22ceee7f8cf Mon Sep 17 00:00:00 2001
From: N-Shar-ma <bablinaneh@gmail.com>
Date: Fri, 16 Feb 2024 14:30:54 +0530
Subject: [PATCH] compose: Refactor recipient area to use grid layout instead
 of flexbox.

This is a prep commit for moving the narrow to compose recipients button
before the input, and also aids in the overall compose area redesign.
---
 web/styles/compose.css    | 16 +++++++++-------
 web/styles/dark_theme.css |  2 +-
 web/styles/input_pill.css |  4 +---
 web/templates/compose.hbs |  6 ++++--
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/web/styles/compose.css b/web/styles/compose.css
index 1c92537aee..4dd717ce53 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -204,6 +204,9 @@
 
     #compose-direct-recipient {
         flex-grow: 1;
+        display: grid;
+        grid-template-columns: 1fr;
+        align-items: stretch;
     }
 
     .message_header {
@@ -754,7 +757,9 @@ textarea.new_message_textarea,
 }
 
 #compose_recipient_box {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: stretch;
     flex: 1 1 0;
     border-radius: 3px;
     background: hsl(0deg 0% 100%);
@@ -776,12 +781,7 @@ textarea.new_message_textarea,
 
     /* Styles for input in the recipient_box */
     #stream_message_recipient_topic {
-        /* Override inherited widths; flexbox will ensure
-           that it grows to fit. */
-        width: 0;
-        flex: 1 1 0;
-
-        /* Override flexbox's effective `max-content` min-width */
+        /* Override grid's effective `max-content` min-width */
         overflow: hidden;
         text-overflow: ellipsis;
 
@@ -789,6 +789,8 @@ textarea.new_message_textarea,
         outline: none;
 
         padding: 4px 6px;
+        /* Reset height to let `align-items: stretch` on the grid parent handle this. */
+        height: auto;
     }
 
     /* Styles for new conversation button in the recipient_box */
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 60b75d99b7..a90a91be0e 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -476,7 +476,7 @@
         background-color: hsl(0deg 86% 14%) !important;
     }
 
-    #compose-direct-recipient.pill-container {
+    #compose-direct-recipient .pill-container {
         background-color: hsl(0deg 0% 0% / 20%);
     }
 
diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index 4aedabb8d3..b52ecb59c7 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -121,10 +121,8 @@
     }
 }
 
-#compose-direct-recipient.pill-container {
+#compose-direct-recipient .pill-container {
     padding: 0 2px;
-    flex-grow: 1;
-    align-content: center;
     border: 1px solid hsl(0deg 0% 0% / 20%);
     background-color: hsl(0deg 0% 100%);
 
diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs
index 9e479f50bb..b7916a8391 100644
--- a/web/templates/compose.hbs
+++ b/web/templates/compose.hbs
@@ -69,8 +69,10 @@
                                     <i class="zulip-icon zulip-icon-close"></i>
                                 </button>
                             </div>
-                            <div id="compose-direct-recipient" class="pill-container" data-before="{{t 'You and' }}">
-                                <div class="input" contenteditable="true" id="private_message_recipient" data-no-recipients-text="{{t 'Add one or more users' }}" data-some-recipients-text="{{t 'Add another user...' }}"></div>
+                            <div id="compose-direct-recipient" data-before="{{t 'You and' }}">
+                                <div class="pill-container">
+                                    <div class="input" contenteditable="true" id="private_message_recipient" data-no-recipients-text="{{t 'Add one or more users' }}" data-some-recipients-text="{{t 'Add another user...' }}"></div>
+                                </div>
                             </div>
                         </div>
                     </div>