From 63c3f740564a0b631ccb459bfb1c54d58f12207e Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Tue, 30 Nov 2021 05:29:59 +0000
Subject: [PATCH] compose: Rearrange compose bottom to separate out enter
 sends.

* We move enter sends into its own row separate from compose
control buttons and send button. This makes sure compose control
icons don't wrap on narrow widths.

* Move char limit indicator parallel to enter sends button.

* Left align character exceeded count at bottom.
---
 static/styles/compose.css    | 10 ++++++++++
 static/templates/compose.hbs | 22 ++++++++++++----------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/static/styles/compose.css b/static/styles/compose.css
index c461b20929..06f89f14ad 100644
--- a/static/styles/compose.css
+++ b/static/styles/compose.css
@@ -181,9 +181,19 @@
 
 #below-compose-content {
     display: flex;
+    flex-direction: column;
     width: 100%;
     margin-top: 6px;
     margin-bottom: -2px;
+
+    .compose_bottom_top_container {
+        display: flex;
+    }
+
+    .compose_bottom_bottom_container {
+        display: flex;
+        justify-content: space-between;
+    }
 }
 
 #compose_limit_indicator {
diff --git a/static/templates/compose.hbs b/static/templates/compose.hbs
index 2b76d7ec8b..44fd772eaf 100644
--- a/static/templates/compose.hbs
+++ b/static/templates/compose.hbs
@@ -93,12 +93,18 @@
                             </div>
                             <div class="drag"></div>
                             <div id="below-compose-content">
-                                <div class="compose_right_float_container order-3">
-                                    <button type="submit" id="compose-send-button" class="button small send_message animated-purple-button" title="{{t 'Send' }} (Ctrl + Enter)">
-                                        <img class="loader" alt="" src="" />
-                                        <span>{{t 'Send' }}</span>
-                                    </button>
-                                    <div class="enter_sends order-2">
+                                <div class="compose_bottom_top_container">
+                                    <div class="compose_right_float_container order-3">
+                                        <button type="submit" id="compose-send-button" class="button small send_message animated-purple-button" title="{{t 'Send' }} (Ctrl + Enter)">
+                                            <img class="loader" alt="" src="" />
+                                            <span>{{t 'Send' }}</span>
+                                        </button>
+                                    </div>
+                                    {{> compose_control_buttons }}
+                                </div>
+                                <div class="compose_bottom_bottom_container">
+                                    <span id="compose_limit_indicator"></span>
+                                    <div class="enter_sends">
                                         <label id="enter-sends-label" class="compose_checkbox_label tippy-zulip-tooltip" data-tippy-content="Click to switch">
                                             <span class="enter_sends_true">
                                                 {{t 'Enter to send' }}
@@ -116,10 +122,6 @@
                                         </label>
                                     </div>
                                 </div>
-                                {{> compose_control_buttons }}
-                                <div class="compose_right_float_container order-2">
-                                    <span id="compose_limit_indicator"></span>
-                                </div>
                             </div>
                         </div>
                     </div>