compose: Present banners with intrinsic layout.

By implementing a careful flexbox declaration on a new banner-
element container, this presents banners accessibly across the full
range of possible viewports--and relies only on a single, small
media query to do so.

Fixes: #25847

Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>

web/styles/compose.css

@@ -278,19 +278,38 @@
     border-radius: 5px;
     border: 1px solid;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    /* Baseline alignment ensures the closing X
+       appears centered with the banner text. */
+    align-items: baseline;
     font-size: 15px;
     line-height: 18px;
 
+    .main-view-banner-elements-wrapper {
+        display: flex;
+        /* Baseline alignment ensures the banner
+           and button text appear centered with
+           each other. */
+        align-items: baseline;
+        /* Allow this flex container to grow or
+           shrink to fit the outer container. */
+        flex: 1 1 auto;
+        /* Allow items to wrap; this supports an
+           intrinsic layout for banner text and
+           buttons, which will always occupy the
+           space available, without our having
+           to fiddle with tons of media queries. */
+        flex-wrap: wrap;
+    }
+
     & p {
         margin: 0; /* override bootstrap */
         /* 5px right padding + 10px left-margin of the neighbouring button will match the left padding */
         padding: 8px 5px 8px 15px;
-    }
-
-    .banner_content {
-        flex-grow: 1;
+        /* The banner text uses a flex-basis of 150px,
+           which is roughly the width at which banner
+           text lines are still comfortably readable.
+           Still, it can grow and shrink as needed. */
+        flex: 1 1 150px;
     }
 
     .main-view-banner-action-button,
@@ -299,12 +318,45 @@
         border-radius: 4px;
         padding: 5px 10px;
         font-weight: 600;
-        margin-left: 10px;
         margin-top: 4.5px;
         margin-bottom: 4.5px;
-        height: 32px;
-        white-space: nowrap;
+        /* Buttons take a minimum height for
+           when their text fits on a single
+           line. */
+        min-height: 32px;
+        /* When we're larger than large mobile
+           scales ($ml_min), flex the button to
+           its max-content, i.e., all its text
+           on a single line. But do not grow in
+           order to avoid awkward, oversized
+           buttons within the flex group. */
+        flex: 0 1 max-content;
+        /* Use this margin-left hack to keep
+           the button to the righthand side of
+           the banner. */
+        margin-left: auto;
 
+        @media (width < $ml_min) {
+            /* When we're smaller than large mobile
+               scales, we allow the button to grow,
+               so that it can span the full width of
+               narrow, mobile-scale banners as it
+               wraps onto a second line.
+
+               We also allow the button to shrink,
+               so that, for example, the text can
+               wrap on the schedule-message button
+               that appears when undoing a scheduled
+               message. */
+            flex: 1 1 max-content;
+            /* Use a 10px left margin to keep the
+               button away from the edge of the
+               banner box to match the banner text;
+               we need this only at small scales,
+               when the button grows to the full
+               width of the flex container. */
+            margin-left: 10px;
+        }
         /* Extra margin to ensure the layout is identical when there is no
            close button. */
         &.right_edge {

web/templates/compose_banner/compose_banner.hbs

@@ -3,14 +3,16 @@
   {{#if user_id}}data-user-id="{{user_id}}"{{/if}}
   {{#if stream_id}}data-stream-id="{{stream_id}}"{{/if}}
   {{#if topic_name}}data-topic-name="{{topic_name}}"{{/if}}>
-    {{#if banner_text}}
-    <p class="banner_content">{{banner_text}}</p>
-    {{else}}
-    <div class="banner_content">{{> @partial-block}}</div>
-    {{/if}}
-    {{#if button_text}}
-    <button class="main-view-banner-action-button{{#if hide_close_button}} right_edge{{/if}}" {{#if scheduling_message}}data-validation-trigger="schedule"{{/if}}>{{button_text}}</button>
-    {{/if}}
+    <div class="main-view-banner-elements-wrapper {{#if button_text}}banner-contains-button{{/if}}">
+        {{#if banner_text}}
+        <p class="banner_content">{{banner_text}}</p>
+        {{else}}
+        <div class="banner_content">{{> @partial-block}}</div>
+        {{/if}}
+        {{#if button_text}}
+        <button class="main-view-banner-action-button{{#if hide_close_button}} right_edge{{/if}}" {{#if scheduling_message}}data-validation-trigger="schedule"{{/if}}>{{button_text}}</button>
+        {{/if}}
+    </div>
     {{#if hide_close_button}}
     {{!-- hide_close_button is null by default, and false if explicitly set as false. --}}
     {{else}}

web/templates/compose_banner/success_message_scheduled_banner.hbs

@@ -1,9 +1,11 @@
 <div
   class="main-view-banner success message_scheduled_success_compose_banner"
   data-scheduled-message-id="{{scheduled_message_id}}">
-    <p class="banner_content">{{t 'Your message has been scheduled for {deliver_at}.' }}
-        <a href="#scheduled">{{t "View scheduled messages" }}</a>
-    </p>
-    <button class="main-view-banner-action-button undo_scheduled_message" >{{t "Undo"}}</button>
+    <div class="main-view-banner-elements-wrapper {{#if button_text}}banner-contains-button{{/if}}">
+        <p class="banner_content">{{t 'Your message has been scheduled for {deliver_at}.' }}
+            <a href="#scheduled">{{t "View scheduled messages" }}</a>
+        </p>
+        <button class="main-view-banner-action-button undo_scheduled_message" >{{t "Undo"}}</button>
+    </div>
     <a role="button" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>
 </div>