From acbfdb1c360439f6fd614287d672bfce7015b6e2 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Tue, 1 Feb 2022 13:29:57 +0000
Subject: [PATCH] compose: Use flexbox to align items in compose top right.

This will help us align components on compose box top better
on small screen sizes.

We also center align the compose_top elements.
---
 static/styles/compose.css    | 21 ++++++++++----
 static/templates/compose.hbs | 54 +++++++++++++++++++-----------------
 2 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/static/styles/compose.css b/static/styles/compose.css
index b95b3bdabe..73a37c74c9 100644
--- a/static/styles/compose.css
+++ b/static/styles/compose.css
@@ -73,7 +73,7 @@
 
 .message_comp {
     display: none;
-    padding: 10px 10px 0 5px;
+    padding: 5px 10px 0 5px;
 }
 
 .autocomplete_secondary {
@@ -228,10 +228,15 @@
     margin: auto;
 }
 
+#compose_top {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 5px;
+}
+
 #compose_top_right {
-    position: absolute;
-    right: 0;
-    float: right;
+    display: flex;
+    align-items: center;
 
     button {
         background: transparent;
@@ -416,7 +421,10 @@ input.recipient_box {
     width: 20%;
     border-radius: 0 3px 3px 0;
     border-left: 0;
-    min-width: 120px;
+
+    @media (width > $sm_min) {
+        min-width: 120px;
+    }
 
     &:focus {
         border-left: none;
@@ -528,6 +536,7 @@ input.recipient_box {
 
 #private-message {
     align-items: center;
+    width: 100%;
 }
 
 .tippy-content .compose_control_buttons_container {
@@ -699,7 +708,7 @@ a.compose_control_button.hide {
 @media (width < $mm_min) {
     #stream_message_recipient_topic.recipient_box {
         width: calc(100% - 192px);
-        min-width: 75px;
+        min-width: 110px;
     }
 
     #compose-content {
diff --git a/static/templates/compose.hbs b/static/templates/compose.hbs
index b12aa2503c..18c5e87c3a 100644
--- a/static/templates/compose.hbs
+++ b/static/templates/compose.hbs
@@ -51,39 +51,41 @@
         <div id="compose_private_stream_alert" class="alert home-error-bar"></div>
         <div id="out-of-view-notification" class="notification-alert"></div>
         <div class="composition-area">
-            <div id="compose_top_right">
-                <button type="button" class="expand_composebox_button fa fa-angle-up" aria-label="{{t 'Expand compose' }}" tabindex=0 data-tippy-content="{{t 'Expand compose' }}"></button>
-                <button type="button" class="collapse_composebox_button fa fa-angle-down" aria-label="{{t 'Collapse compose' }}" tabindex=0 data-tippy-content="{{t 'Collapse compose' }}"></button>
-                <button type="button" class="close" id='compose_close' data-tippy-content="{{t 'Cancel compose' }}  <span class='hotkey-hint'>(Esc)</span>">&times;</button>
-            </div>
             <form id="send_message_form" action="/json/messages" method="post">
                 {{ csrf_input }}
                 <div class="compose_table">
-                    <div id="stream-message">
-                        <div class="stream-selection-header-colorblock message_header_stream left_part"></div>
-                        <div class="right_part">
-                            <span id="compose-lock-icon">
-                                <i class="fa fa-lock" title="{{t 'This is a private stream' }}" aria-hidden="true"></i>
-                            </span>
-                            <span id="compose-globe-icon">
-                                <i class="fa fa-globe" title="{{t 'This is a web-public stream' }}" aria-hidden="true"></i>
-                            </span>
-                            <input type="text" class="recipient_box" name="stream_message_recipient_stream" id="stream_message_recipient_stream" maxlength="30" value="" placeholder="{{t 'Stream' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Stream' }}" />
-                            <i class="fa fa-angle-right" aria-hidden="true"></i>
-                            <input type="text" class="recipient_box" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="60" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
+                    <div id="compose_top">
+                        <div id="stream-message">
+                            <div class="stream-selection-header-colorblock message_header_stream left_part"></div>
+                            <div class="right_part">
+                                <span id="compose-lock-icon">
+                                    <i class="fa fa-lock" title="{{t 'This is a private stream' }}" aria-hidden="true"></i>
+                                </span>
+                                <span id="compose-globe-icon">
+                                    <i class="fa fa-globe" title="{{t 'This is a web-public stream' }}" aria-hidden="true"></i>
+                                </span>
+                                <input type="text" class="recipient_box" name="stream_message_recipient_stream" id="stream_message_recipient_stream" maxlength="30" value="" placeholder="{{t 'Stream' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Stream' }}" />
+                                <i class="fa fa-angle-right" aria-hidden="true"></i>
+                                <input type="text" class="recipient_box" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="60" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
+                            </div>
                         </div>
-                    </div>
-                    <div id="private-message">
-                        <div class="to_text">
-                            <span>{{t 'To' }}:</span>
-                        </div>
-                        <div class="right_part">
-                            <div class="pm_recipient">
-                                <div 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="private-message">
+                            <div class="to_text">
+                                <span>{{t 'To' }}:</span>
+                            </div>
+                            <div class="right_part">
+                                <div class="pm_recipient">
+                                    <div 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>
                                 </div>
                             </div>
                         </div>
+                        <div id="compose_top_right">
+                            <button type="button" class="expand_composebox_button fa fa-angle-up" aria-label="{{t 'Expand compose' }}" tabindex=0 data-tippy-content="{{t 'Expand compose' }}"></button>
+                            <button type="button" class="collapse_composebox_button fa fa-angle-down" aria-label="{{t 'Collapse compose' }}" tabindex=0 data-tippy-content="{{t 'Collapse compose' }}"></button>
+                            <button type="button" class="close" id='compose_close' data-tippy-content="{{t 'Cancel compose' }}  <span class='hotkey-hint'>(Esc)</span>">&times;</button>
+                        </div>
                     </div>
                     <div class="messagebox-wrapper">
                         <div class="messagebox">