From f91f37ef70f88e861b88f0b64257d93c7f0d6013 Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Thu, 11 Jun 2026 19:08:22 +0900
Subject: [PATCH] Email reader: flatten action rows with display:contents
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The primary/secondary row wrappers were still creating nested flex
containers — even with parent flex-direction:row the two row divs
sized to content and could stack visually. Switching the wrappers
to display:contents collapses them entirely so all 6 buttons
become direct flex children of .email-reader-actions and lay out
on a single row guaranteed.
---
 static/style.css | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/static/style.css b/static/style.css
index 5f77d3176..5e8feca2e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -4679,12 +4679,9 @@ body.bg-pattern-sparkles {
       #email-lib-modal .email-reader-actions-row,
       .email-reader-tab-modal .email-reader-actions-row,
       .email-window-modal .email-reader-actions-row {
-        display: flex !important;
-        flex-direction: row !important;
-        flex-wrap: nowrap !important;
-        align-items: center !important;
-        justify-content: flex-end !important;
-        gap: 4px !important;
+        /* Flatten the row wrappers so all 6 buttons sit on one
+           row inside the absolute-positioned actions cluster. */
+        display: contents !important;
       }
       /* Horizontal-scroll recipient chip rows on mobile. */
       #email-lib-modal .email-reader-meta,
@@ -28181,15 +28178,12 @@ button .spinner-whirlpool {
   margin-top: -4px;
   flex-wrap: nowrap;
 }
-/* All six actions in one row — the two action-row children flow
-   side-by-side inside the parent flex row. */
+/* The two action-row wrappers (primary / secondary) are layout
+   pass-throughs — `display: contents` flattens them so all 6
+   buttons become direct flex children of .email-reader-actions
+   and render on the same row. */
 .email-reader-actions-row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 4px;
-  flex-wrap: nowrap;
+  display: contents;
 }
 .email-reader-atts {
   display: flex; flex-wrap: wrap; gap: 6px;