From 93ae65f99f5f96b7a3eed7f118c2f89b0d4a4993 Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Thu, 11 Jun 2026 21:59:45 +0900
Subject: [PATCH] Email reader undocked: wrap action cluster to 2 rows before
 overlay

Cluster is now in-flow with margin-left:auto and flex-wrap:wrap so
when the chip text grows long enough to crowd it, the buttons split
to a second row of icons before they have to cover the chip. The
absolute-overlay behavior kicks back in at very narrow pane widths
(<380px via @container docpane) so From: still fits on one row when
the pane is truly cramped.
---
 static/style.css | 43 ++++++++++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/static/style.css b/static/style.css
index 0777ad129..b7c90bcc5 100644
--- a/static/style.css
+++ b/static/style.css
@@ -28067,32 +28067,45 @@ button .spinner-whirlpool {
   min-width: 0;
 }
 /* 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. */
+   edge. When the chip text grows wide enough to crowd the cluster,
+   the cluster wraps to two (or more) rows of buttons before it has
+   to overlay the chip — at the point where even that doesn't fit,
+   the cluster goes back to position: absolute and slides over the
+   chip (chip scrolls horizontally underneath). */
 .email-reader-meta-row.email-reader-meta-from > .email-reader-actions-inline {
-  position: absolute;
-  top: -7px;
-  right: 0;
+  margin-left: auto;
   display: flex;
   flex-direction: row;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
   gap: 4px;
   flex-shrink: 0;
+  /* Lift visually so the cluster floats over the From baseline. */
+  position: relative;
+  top: -7px;
   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 is the positioning context for the absolute actions
-   cluster, and stays a single non-wrapping row. */
+/* When the From row can no longer fit even a wrapped cluster
+   alongside the chip, the chip span itself wraps to a new row —
+   then the cluster overlays via stacking-context. The overlay
+   guard kicks in via the container query below. */
 .email-reader-meta-row.email-reader-meta-from {
   position: relative;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
+}
+/* Pinch point: when the reader pane gets very narrow (< 380px),
+   the action cluster goes absolute top-right and overlays the chip
+   so From: and the buttons stay on a single row. */
+@container docpane (max-width: 380px) {
+  .email-reader-meta-row.email-reader-meta-from > .email-reader-actions-inline {
+    position: absolute;
+    top: -7px;
+    right: 0;
+    flex-wrap: nowrap;
+    background: linear-gradient(to right, transparent 0, var(--bg) 18px);
+    padding-left: 22px;
+  }
 }
 /* Desktop only: shift the whole From row up 6px. Mobile keeps the
    original placement (the mobile @media block overrides padding so