jpmschweitzer/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-09-25 09:32:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Email reader undocked: wrap action cluster to 2 rows before overlay

Browse Source 
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.
This commit is contained in:
pewdiepie-archdaemon
2026-06-11 21:59:45 +09:00
parent 3638b54a96
commit 5cb6ebe716
1 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+28 -15
View File
@@ -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