compose: Move buttons to popover in 2 batches instead of all at once.

This ensures that there is never too much awkward empty space in the
row of buttons below the compose box.

web/src/compose_popovers.js

@@ -77,6 +77,7 @@ export function initialize() {
                     render_compose_control_buttons_popover({
                         giphy_enabled: giphy.is_giphy_enabled(),
                         preview_mode_on,
+                        inside_popover: true,
                     }),
                 ),
             );

web/src/css_variables.js

@@ -22,6 +22,7 @@ const mc = 849; // Middle column as wide as it appears after the `sm` breakpoint
 const cb1 = 1240;
 const cb2 = 998;
 const cb3 = 676;
+const cb4 = 448;
 
 module.exports = {
     media_breakpoints: {
@@ -37,6 +38,7 @@ module.exports = {
         cb1_min: cb1 + "px",
         cb2_min: cb2 + "px",
         cb3_min: cb3 + "px",
+        cb4_min: cb4 + "px",
     },
 
     media_breakpoints_num: {

web/styles/compose.css

@@ -967,7 +967,6 @@ textarea.new_message_textarea,
 }
 
 .compose-control-buttons-container {
-    margin-right: auto;
     display: flex;
     align-items: center;
 
@@ -1072,6 +1071,29 @@ textarea.new_message_textarea,
             display: none;
         }
     }
+
+    .show_popover_buttons_2 {
+        display: flex;
+        align-items: center;
+        padding: 0;
+        margin: 0;
+
+        /* This is similar to show_popover_buttons, but it's only for those
+        compose buttons that we hide, and show in the popover only when the
+        screen gets extremely narrow. */
+
+        @media (width < $cb4_min) {
+            display: none;
+        }
+    }
+
+    &.show_cb4 {
+        display: none;
+
+        @media (width < $cb4_min) {
+            display: flex;
+        }
+    }
 }
 
 .message-send-controls {

web/templates/compose_control_buttons.hbs

@@ -32,6 +32,10 @@
     <div class="compose_control_button_container {{#unless giphy_enabled }}hide{{/unless}} preview_mode_disabled" data-tippy-content="{{t 'Add GIF' }}">
         <a role="button" class="compose_control_button compose_gif_icon zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0></a>
     </div>
+    <div class="show_popover_buttons_2">
+        <div class="divider">|</div>
+        {{> popovers/compose_control_buttons/compose_control_buttons_in_popover_2}}
+    </div>
     <div class="show_popover_buttons">
         <div class="divider">|</div>
         {{> popovers/compose_control_buttons/compose_control_buttons_in_popover}}

web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs

@@ -1,9 +1,4 @@
 <div class="compose-control-buttons-container preview_mode_disabled">
-    <a role="button" data-format-type="link" class="compose_control_button fa fa-link formatting_button" aria-label="{{t 'Link' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Link' }}"></a>
-    <a role="button" data-format-type="bold" class="compose_control_button fa fa-bold formatting_button" aria-label="{{t 'Bold' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bold' }}"></a>
-    <a role="button" data-format-type="italic" class="compose_control_button fa fa-italic formatting_button" aria-label="{{t 'Italic' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Italic' }}"></a>
-    <a role="button" data-format-type="strikethrough" class="compose_control_button fa fa-strikethrough formatting_button" aria-label="{{t 'Strikethrough' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Strikethrough' }}"></a>
-    <div class="divider">|</div>
     <a role="button" data-format-type="numbered" class="compose_control_button fa fa-list-ol formatting_button" aria-label="{{t 'Numbered list' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Numbered list' }}"></a>
     <a role="button" data-format-type="bulleted" class="compose_control_button fa fa-list-ul formatting_button" aria-label="{{t 'Bulleted list' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bulleted list' }}"></a>
     <div class="divider">|</div>

web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover_2.hbs

@@ -0,0 +1,9 @@
+<div class="compose-control-buttons-container preview_mode_disabled {{#if inside_popover}} show_cb4 {{/if}}">
+    <a role="button" data-format-type="link" class="compose_control_button fa fa-link formatting_button" aria-label="{{t 'Link' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Link' }}"></a>
+    <a role="button" data-format-type="bold" class="compose_control_button fa fa-bold formatting_button" aria-label="{{t 'Bold' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bold' }}"></a>
+    <a role="button" data-format-type="italic" class="compose_control_button fa fa-italic formatting_button" aria-label="{{t 'Italic' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Italic' }}"></a>
+    <a role="button" data-format-type="strikethrough" class="compose_control_button fa fa-strikethrough formatting_button" aria-label="{{t 'Strikethrough' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Strikethrough' }}"></a>
+    {{#if inside_popover}}
+        <div class="divider">|</div>
+    {{/if}}
+</div>

web/templates/popovers/compose_control_buttons/compose_control_buttons_popover.hbs

@@ -1,3 +1,4 @@
 <div class="compose-control-buttons-container order-1 {{#if preview_mode_on}} preview_mode {{/if}}">
+    {{> compose_control_buttons_in_popover_2}}
     {{> compose_control_buttons_in_popover}}
 </div>