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

Email reader: cap action cluster at 2 rows then overlay with shadow

Browse Source 
Three-step shrink:
1. > 600px pane: cluster sits in col 2 as 1 row of 6
2. 380-600px pane: cluster capped at 3-icon width so wrapping
   stops at 3 + 3 (max 2 rows) — chips share width with the 2-row
   cluster instead of multiplying into 3+ rows
3. < 380px pane: cluster snaps to absolute overlay with left-edge
   box-shadow, still capped at 3-icon width so it's the same 2-row
   shape but floating above the truncated chips
This commit is contained in:
pewdiepie-archdaemon
2026-06-11 22:21:04 +09:00
parent 13086c3662
commit d95abaff1b
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+10 -1
View File
@@ -28149,6 +28149,15 @@ button .spinner-whirlpool {
.email-reader-meta .recipient-chips {
min-width: 60px;
}
/* Medium pane widths: cap the cluster at 3 icons per row so it
never wraps past 2 rows (3 top + 3 bottom). Below this break the
chips start sharing the width with a 2-row cluster instead of
the icons multiplying into 3+ rows. */
@container docpane (max-width: 600px) {
.email-reader-meta > .email-reader-actions-inline {
max-width: calc(48px * 3 + 4px * 2);
}
}
/* Very narrow undocked panes: once the chip span has shrunk to its
~4-character min, the cluster snaps to absolute overlay with a
soft shadow so it visually floats above the truncated chip. */
@@ -28158,7 +28167,7 @@ button .spinner-whirlpool {
top: 1px;
right: 0;
margin-top: 0;
max-width: none;
max-width: calc(48px * 3 + 4px * 2);
z-index: 2;
background: linear-gradient(to right, transparent 0, var(--bg) 18px);
padding-left: 22px;