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:
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user