From 4df04f10320e0fbacefb48ef9cbf4e110a805f03 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Thu, 25 May 2023 11:09:39 -0500
Subject: [PATCH] compose_box: Correct topic input-box height.

While this commit achieves what the subject advertises (fixing the
input box's height to match the recipient drop-down), but it does
so by relying heavily on flexbox's behavior to manage the height
of the elements and vertical centering, where necessary, rather
than positioning hacks or vertical padding.

This commit also removes some additional styles that do not make
sense (e.g., `min-width: 0`) or that need not be set.
---
 web/styles/compose.css | 35 +++++++++++++++++++++--------------
 web/styles/zulip.css   |  7 +++++++
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/web/styles/compose.css b/web/styles/compose.css
index 2a4bf96e07..14c3ff2586 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -107,11 +107,6 @@
     }
 
     #compose-recipient {
-        padding: 0;
-        display: flex;
-        align-items: center;
-        flex: 1;
-
         &.compose-recipient-direct-selected {
             #compose_select_recipient_widget {
                 border-radius: 4px !important;
@@ -125,14 +120,15 @@
         .fa-angle-right {
             font-size: 0.9em;
             -webkit-text-stroke: 0.05em;
-            position: relative;
+            align-self: center;
             margin: 0 5px;
         }
 
         & a.narrow_to_compose_recipients {
             background: transparent;
             font-size: 18px;
-            padding: 1px;
+            padding: 0 1px;
+            align-self: center;
             line-height: 20px;
             opacity: 0.7;
             border: 0;
@@ -519,7 +515,8 @@ textarea.new_message_textarea,
 
 input.recipient_box {
     margin: 0;
-    height: 1.1em;
+    padding: 0 6px;
+    height: auto;
     border-radius: 3px;
 }
 
@@ -527,6 +524,10 @@ input.recipient_box {
     border-radius: 0 4px 4px 0;
     width: auto;
     outline: none;
+
+    &.dropdown-widget-button {
+        padding: 0 6px;
+    }
 }
 
 #stream_message_recipient_topic.recipient_box {
@@ -629,10 +630,20 @@ input.recipient_box {
 }
 
 #compose-recipient {
-    min-width: 0;
     display: flex;
-    align-items: center;
     width: 100%;
+    /* Use this containing flex element to
+      establish the minimum height of all its
+      children; the default `align-items: stretch`
+      (which is set on any flexbox without specifying
+      it) ensures that the child flex items will
+      always stretch to fit the height set here;
+      larger heights, such as on group-DM pills,
+      will allow this to grow as needed.
+      Child flex items like chevrons take
+      `align-self: center` to center only
+      themselves, where necessary. */
+    min-height: var(--compose-recipient-box-min-height);
 }
 
 .tippy-content .compose_control_buttons_container {
@@ -834,10 +845,6 @@ a.compose_control_button.hide {
     }
 }
 
-#stream_message_recipient_topic {
-    min-width: 0;
-}
-
 .dropdown-menu {
     & ul {
         list-style: none;
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 71f428e6ba..d07b1c00d5 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -75,6 +75,13 @@ body {
     */
     --unread-marker-left: -1px;
 
+    /*
+    Compose-recipient box minimum height. Used in a flexbox context to
+    allow elements like DM pills to stack without breaking out of their
+    flex item.
+    */
+    --compose-recipient-box-min-height: 30.5px;
+
     /* Colors used across the app */
     --color-background-private-message-header: hsl(46deg 35% 93%);
     --color-background-private-message-content: hsl(45deg 20% 96%);