Salastil/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-06-17 02:05:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

Email reader: actions overlay chip instead of wrapping below when narrow

Browse Source 
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.
This commit is contained in:
pewdiepie-archdaemon
2026-06-11 20:29:24 +09:00
parent 2e8e097683
commit 7fe8a70032
1 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+18 -8
View File
@@ -28048,23 +28048,33 @@ button .spinner-whirlpool {
gap: 6px; gap: 6px;
min-width: 0; min-width: 0;
} }
/* All action buttons live INSIDE the From row, right-aligned. When /* All action buttons live INSIDE the From row, pinned to the right
there's room (undocked) they sit on the same row as From; when edge. When the window narrows, the action cluster STAYS on the
docked or narrow they wrap below it. */ 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 { .email-reader-meta-row.email-reader-meta-from > .email-reader-actions-inline {
margin-left: auto; position: absolute;
top: 0;
right: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: nowrap;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
gap: 4px; gap: 4px;
flex-shrink: 0; 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 { .email-reader-meta-row.email-reader-meta-from {
flex-wrap: wrap; position: relative;
row-gap: 2px; 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