Align year-row timelines with a shared subgrid

Each year's <summary> was its own grid, so the `auto` figures column was
sized per row and the timeline tracks ended at a different x per year.
Promote the column definition to `.year-rows` and have the rows opt in
with `grid-template-columns: subgrid`, behind an @supports guard so
engines without subgrid keep today's layout. Mobile undoes the promotion.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JVQx4NUvPbJhn6UcvRd2QY
This commit is contained in:
2026-09-20 13:22:26 +02:00
parent 74ddfcd440
commit 3fbc6b8ad8
2 changed files with 49 additions and 0 deletions
+38
View File
@@ -331,6 +331,44 @@
padding: var(--sp-2) 0 var(--sp-5) 3.5rem;
}
/* Subgrid: promotes the summary's columns to `.year-rows` so every row's
* figures share the same tracks — the timeline and figure columns then
* line up across years instead of each row's `auto` column sizing to its
* own text. Engines without subgrid keep the independent per-row grid
* above. */
@supports (grid-template-columns: subgrid) {
.year-rows {
display: grid;
grid-template-columns: 3.5rem minmax(0, 1fr) auto auto auto var(--icon-sm);
column-gap: var(--sp-4);
}
.year-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
}
.year-row__summary {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
}
.year-row__summary::after {
grid-column: 6;
}
.year-row__body {
grid-column: 1 / -1;
}
.year-row__figures {
grid-column: 3 / 6;
grid-template-columns: subgrid;
}
}
.year-row__table {
width: auto;
margin-bottom: var(--sp-4);
+11
View File
@@ -91,6 +91,17 @@
gap: var(--sp-4) var(--sp-6);
}
/* Undo the subgrid promotion (components.css) — mobile keeps each row's
* own independent layout below, not the shared per-year-list tracks. */
.year-rows {
display: flex;
flex-direction: column;
}
.year-row {
display: block;
}
.year-row__summary {
grid-template-columns: 3rem minmax(0, 1fr) var(--icon-sm);
}