From f8fa47fa0227da843499dcbfa3d97dd070e113cf Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Wed, 1 Nov 2023 14:13:52 -0500
Subject: [PATCH] compose_box: Use columnar flex to position Drafts, limit,
 Send button.

---
 web/styles/compose.css | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/styles/compose.css b/web/styles/compose.css
index a22e11fd46..0f1931bfee 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -267,6 +267,13 @@
 
 #message-send-controls-container {
     grid-area: message-send-controls-container;
+    /* A columnar flex does a nice job here
+       holding Drafts to the top of the
+       container, and the send button to
+       the bottom--even as the compose box
+       expands or contracts. */
+    display: flex;
+    flex-direction: column;
 }
 
 #message-formatting-controls-container {
@@ -274,10 +281,12 @@
 }
 
 #compose-limit-indicator {
-    margin-right: 8px;
     font-size: 12px;
     color: hsl(39deg 100% 50%);
-    align-self: center;
+
+    /* Keep the limit indicator
+       just above the send button */
+    margin-top: auto;
 
     &.over_limit {
         color: hsl(0deg 76% 65%);
@@ -981,7 +990,6 @@ textarea.new_message_textarea,
     display: flex;
     flex-direction: row;
     white-space: nowrap;
-    margin-top: 2px;
     height: 24px;
 
     &.disabled-message-send-controls {