Salastil/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-06-17 10:15:27 -04: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 f8d3890e6a
commit 93ae65f99f
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; min-width: 0;
} }
/* All action buttons live INSIDE the From row, pinned to the right /* All action buttons live INSIDE the From row, pinned to the right
edge. When the window narrows, the action cluster STAYS on the edge. When the chip text grows wide enough to crowd the cluster,
From line and overlays the chip — the chip's recipient-chips span the cluster wraps to two (or more) rows of buttons before it has
scrolls horizontally underneath, so the user can drag/scroll to to overlay the chip — at the point where even that doesn't fit,
reveal anything tucked under the buttons. */ 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 { .email-reader-meta-row.email-reader-meta-from > .email-reader-actions-inline {
position: absolute; margin-left: auto;
top: -7px;
right: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
gap: 4px; gap: 4px;
flex-shrink: 0; flex-shrink: 0;
/* Lift visually so the cluster floats over the From baseline. */
position: relative;
top: -7px;
z-index: 2; z-index: 2;
/* Gradient fade so chips poking out from underneath blend into }
the action cluster instead of getting visually clipped. */ /* 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: 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); background: linear-gradient(to right, transparent 0, var(--bg) 18px);
padding-left: 22px; padding-left: 22px;
} }
/* 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 {
position: relative;
flex-wrap: nowrap;
} }
/* Desktop only: shift the whole From row up 6px. Mobile keeps the /* Desktop only: shift the whole From row up 6px. Mobile keeps the
original placement (the mobile @media block overrides padding so original placement (the mobile @media block overrides padding so