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

Email reader: 6px slack on cluster width to enforce 2-row max

Browse Source 
Was fanning out to 3 rows because the 152px max-width (3 icons +
2 gaps exact) had no slack — subpixel rounding could push the
third icon over and trigger another wrap. Bumped to 158px in the
in-grid mode (600px breakpoint) and 180px in the absolute-overlay
mode (380px breakpoint, where the 22px padding-left from the
gradient fade was also eating into the 3-icon row width).
This commit is contained in:
pewdiepie-archdaemon
2026-06-11 22:32:00 +09:00
parent 73dbf3cde7
commit b5449ea3f9
1 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+13 -6
View File
@@ -28193,11 +28193,14 @@ button .spinner-whirlpool {
rows. */ rows. */
@container emailreader (max-width: 600px) { @container emailreader (max-width: 600px) {
.email-reader-meta > .email-reader-actions-inline { .email-reader-meta > .email-reader-actions-inline {
min-width: calc(48px * 3 + 4px * 2); /* 3 icons (48px each) + 2 gaps (4px each) = 152px exact. Adding
max-width: calc(48px * 3 + 4px * 2); 6px slack so subpixel rounding can't tip a row from 3 to 2
/* Right-align the (now wider) cluster so the icons stay glued icons and fan the cluster into a 3rd row. */
to the right edge instead of drifting to the middle when the min-width: 158px;
cluster is wider than its content (e.g. a 2-row stack of 3). */ max-width: 158px;
/* Right-align the cluster so the icons stay glued to the right
edge instead of drifting to the middle when the cluster is
wider than its content (e.g. a 2-row stack of 3). */
justify-self: end; justify-self: end;
} }
} }
@@ -28210,7 +28213,11 @@ button .spinner-whirlpool {
top: 1px; top: 1px;
right: 0; right: 0;
margin-top: 0; margin-top: 0;
max-width: calc(48px * 3 + 4px * 2); /* 158px content + 22px padding-left so the inner row still fits
3 icons cleanly. Without the +padding the 3 icons couldn't
fit and the cluster fanned into a third row. */
min-width: 180px;
max-width: 180px;
z-index: 2; z-index: 2;
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;