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

Email reader: lock cluster to 3+3 layout, shadow overlay at <380px

Browse Source 
- Action cluster's max-width is calc(48*3 + 4*2) so the 6 icons
  always lay out as 3 top / 3 bottom by default.
- When the pane narrows the chips in col 1 shrink first (with 60px
  min so 4 chars + ellipsis stay visible).
- At <380px the cluster snaps to absolute overlay with a left-edge
  box-shadow so it reads as floating above the truncated chip.
This commit is contained in:
pewdiepie-archdaemon
2026-06-11 22:15:20 +09:00
parent 9ac3f40955
commit 5719e4db5f
1 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+11 -7
View File
@@ -28134,11 +28134,10 @@ button .spinner-whirlpool {
align-items: flex-start; align-items: flex-start;
justify-content: flex-end; justify-content: flex-end;
gap: 4px; gap: 4px;
/* Cluster wraps to 2 rows BEFORE the chip starts shrinking — cap /* Cluster is locked to a max-width that fits exactly 3 icons per
at ~half the meta width so as the pane narrows the icons row, so the 6 buttons always lay out as a 3-on-top / 3-on-bottom
re-stack into two rows first, then the chip span starts to grid. The chips in col 1 shrink first when the pane narrows. */
overflow-scroll once even the half-width can't hold the icons. */ max-width: calc(48px * 3 + 4px * 2);
max-width: 50%;
/* Sit visually above the From baseline like the lifted overlay. */ /* Sit visually above the From baseline like the lifted overlay. */
margin-top: -7px; margin-top: -7px;
} }
@@ -28148,17 +28147,22 @@ button .spinner-whirlpool {
.email-reader-meta .recipient-chips { .email-reader-meta .recipient-chips {
min-width: 60px; min-width: 60px;
} }
/* Very narrow undocked panes: cluster snaps back to absolute overlay /* Very narrow undocked panes: once the chip span has shrunk to its
so it doesn't push the From chip into a tiny ribbon. */ ~4-character min, the cluster snaps to absolute overlay with a
soft shadow so it visually floats above the truncated chip. */
@container docpane (max-width: 380px) { @container docpane (max-width: 380px) {
.email-reader-meta > .email-reader-actions-inline { .email-reader-meta > .email-reader-actions-inline {
position: absolute; position: absolute;
top: 1px; top: 1px;
right: 0; right: 0;
margin-top: 0; margin-top: 0;
max-width: none;
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;
/* Soft shadow on the left edge so the overlap reads as the
cluster "floating over" the chip. */
box-shadow: -6px 0 12px -6px rgba(0, 0, 0, 0.25);
} }
} }
/* Desktop only: shift the whole From row up 6px. Mobile keeps the /* Desktop only: shift the whole From row up 6px. Mobile keeps the