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

Email reader: 6-in-1-row default, wrap to 3+3 only when chip touches

Browse Source 
Grid tracks now:
- col 1: minmax(60px, 250px) — chip natural width capped at 250px,
  with the 60px (4 char) floor enforced on From / To / Cc alike
- col 2: minmax(48px, 1fr) — takes the rest, shrinks first when
  the pane narrows

Removed the hard max-width on the action cluster so on wide panes
it stays as one row of 6. Once col 2 shrinks below the 1-row width,
flex-wrap kicks in and the icons re-stack to 3+3. Chips only start
to shrink past that point.
This commit is contained in:
pewdiepie-archdaemon
2026-06-11 22:18:37 +09:00
parent 5719e4db5f
commit 13086c3662
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+11 -9
View File
@@ -28096,13 +28096,14 @@ button .spinner-whirlpool {
min-width: 0;
}
/* Meta uses CSS grid so the From row sits left of the action cluster
in row 1, and the To/Cc details span across row 2 below. The
cluster naturally shrinks alongside the chip — when it can't fit
on one row, flex-wrap drops it into two rows of icons first; only
at very narrow pane widths does it switch back to absolute overlay. */
in row 1, and the To/Cc details share col 1 in row 2 below. Track
sizing: col 1 = chip natural width clamped to 60–250px (chip span
keeps overflow-x scroll so longer names truncate cleanly); col 2
takes the remaining space, shrinking first when the pane narrows
so the cluster wraps to 2 rows of icons before the chip squeezes. */
.email-reader-meta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-columns: minmax(60px, 250px) minmax(48px, 1fr);
grid-auto-rows: auto;
align-items: start;
column-gap: 12px;
@@ -28134,10 +28135,11 @@ button .spinner-whirlpool {
align-items: flex-start;
justify-content: flex-end;
gap: 4px;
/* Cluster is locked to a max-width that fits exactly 3 icons per
row, so the 6 buttons always lay out as a 3-on-top / 3-on-bottom
grid. The chips in col 1 shrink first when the pane narrows. */
max-width: calc(48px * 3 + 4px * 2);
/* Cluster takes its grid column's width — on wide panes col 2 has
room for the 6 icons on one row; as the pane narrows, col 2
shrinks first (col 1 holds its chip width up to 250px), and
flex-wrap drops the buttons to 2 rows once the cluster can't
fit in 1. The chips only start to shrink past that. */
/* Sit visually above the From baseline like the lifted overlay. */
margin-top: -7px;
}