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.
timabbott · Feb 23, 2024 · 4283541 · 4283541
1 parent c2412b5
commit 4283541
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/web/styles/compose.css b/web/styles/compose.css
@@ -207,6 +207,9 @@
 
     #compose-direct-recipient {
         flex-grow: 1;
+        display: grid;
+        grid-template-columns: 1fr;
+        align-items: stretch;
     }
 
     .message_header {
@@ -755,7 +758,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%);
@@ -777,19 +782,16 @@ 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;
 
         box-shadow: none;
         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
@@ -488,7 +488,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
@@ -119,10 +119,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
@@ -68,8 +68,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>