From b4ccde42ce41d2ecb83f0a77ca975499eddbc7eb Mon Sep 17 00:00:00 2001
From: N-Shar-ma <bablinaneh@gmail.com>
Date: Wed, 10 Jul 2024 00:45:35 +0530
Subject: [PATCH] compose: Remove dividers and reduce button width at narrow
 mobile sizes.

At widths under 400px, buttons in the popover were running off the edge,
which is fixed by removing the dividers between them.

For the new info density, buttons in the original row, even despite
removing the dividers, were still not fitting, so their width has been
slightly reduced.
---
 web/styles/compose.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/web/styles/compose.css b/web/styles/compose.css
index e82aa52d69..45467ae7ae 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -1154,6 +1154,12 @@ textarea.new_message_textarea {
            --compose-formatting-buttons-row-height */
         /* 28px at 20px/1em */
         height: 1.4em;
+
+        @media (width < 400px) {
+            /* Remove at mobile widths to make more space
+               for compose buttons */
+            display: none;
+        }
     }
 
     .compose_draft_button {
@@ -1231,6 +1237,14 @@ textarea.new_message_textarea {
                 display: flex;
             }
         }
+
+        .compose_control_button {
+            /* Slightly reduce width so that buttons don't overflow the available
+            space at mobile widths */
+            @media (width < 400px) {
+                width: 1.28em;
+            }
+        }
     }
 }