From 7fe8a70032d5687973d3d50c7854857c140a2b3d Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Thu, 11 Jun 2026 20:29:24 +0900
Subject: [PATCH] Email reader: actions overlay chip instead of wrapping below
 when narrow

Pinned .email-reader-actions-inline to absolute top:0 right:0 of the
From row with a gradient fade. When the window narrows the cluster
stays on the From line and the recipient-chips span scrolls under
it, so users can swipe/drag to reveal recipients tucked behind the
buttons instead of seeing From: jump above the action row.
---
 static/style.css | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/static/style.css b/static/style.css
index 330f32d50..f5c6a2153 100644
--- a/static/style.css
+++ b/static/style.css
@@ -28048,23 +28048,33 @@ button .spinner-whirlpool {
   gap: 6px;
   min-width: 0;
 }
-/* All action buttons live INSIDE the From row, right-aligned. When
-   there's room (undocked) they sit on the same row as From; when
-   docked or narrow they wrap below it. */
+/* All action buttons live INSIDE the From row, pinned to the right
+   edge. When the window narrows, the action cluster STAYS on the
+   From line and overlays the chip — the chip's recipient-chips span
+   scrolls horizontally underneath, so the user can drag/scroll to
+   reveal anything tucked under the buttons. */
 .email-reader-meta-row.email-reader-meta-from > .email-reader-actions-inline {
-  margin-left: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-end;
   gap: 4px;
   flex-shrink: 0;
+  z-index: 2;
+  /* Gradient fade so chips poking out from underneath blend into
+     the action cluster instead of getting visually clipped. */
+  background: linear-gradient(to right, transparent 0, var(--bg) 18px);
+  padding-left: 22px;
 }
-/* From row allows the action cluster to wrap below when narrow. */
+/* From row is the positioning context for the absolute actions
+   cluster, and stays a single non-wrapping row. */
 .email-reader-meta-row.email-reader-meta-from {
-  flex-wrap: wrap;
-  row-gap: 2px;
+  position: relative;
+  flex-wrap: nowrap;
 }
 /* Desktop only: shift the whole From row up 6px. Mobile keeps the
    original placement (the mobile @media block overrides padding so