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

@@ -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;

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%);