117 lines
5.4 KiB
Markdown
117 lines
5.4 KiB
Markdown
# Align the year-row timelines in the Overview tab
|
||
|
||
## Context
|
||
|
||
In the Dashboard Overview tab each year is a `<details class="disclosure year-row">` whose
|
||
`<summary>` is its **own** grid: `grid-template-columns: 3.5rem minmax(0, 1fr) auto var(--icon-sm)`
|
||
(`frontend/src/styles/components.css:225`). Because every row is an independent grid, the `auto`
|
||
figures column is sized per row by that row's own text — "· expiring 5", a wider `saved` number,
|
||
a longer parent name, a 3-digit vs 2-digit PL value. The `minmax(0, 1fr)` track column absorbs the
|
||
difference, so the timeline bars end at a different x per year (see `timeline-offset.png`: 2029's
|
||
track is clearly shortest, 2025 the longest). The figures columns are ragged for the same reason.
|
||
|
||
Goal: every year's timeline track starts and ends at the same x, and the figure columns line up
|
||
down the list — without hardcoding a pixel width that breaks in Swedish (sv strings are longer than
|
||
en) or when a number gains a digit.
|
||
|
||
## Approach — one shared grid via `subgrid`
|
||
|
||
Promote the column definition from each summary to the `.year-rows` list and have the rows opt into
|
||
it with `grid-template-columns: subgrid`. Tracks are then sized once, by the widest content in the
|
||
whole list, and every row inherits identical column widths. Content still sizes the columns, so it
|
||
stays bilingual-safe.
|
||
|
||
Split the figures cell into its three real columns (name | PL left | vacation group) at the list
|
||
level too, so the numbers align vertically across years as well.
|
||
|
||
**CSS only — no TSX changes.** The existing markup already has the right elements
|
||
(`.year-rows` → `.year-row` (`details`) → `.year-row__summary` / `.year-row__body`,
|
||
`.year-row__figures` → `.year-row__parent { display: contents }`).
|
||
|
||
### Files
|
||
|
||
- `frontend/src/styles/components.css` — `.year-rows` (162), `.year-row__summary` (225),
|
||
`.year-row__summary::after` (238), `.year-row__year` (244), `.year-row__track` (252),
|
||
`.year-row__figures` (289), `.year-row__body` (322)
|
||
- `frontend/src/styles/responsive.css` — mobile block at 93–120 (must reset subgrid)
|
||
|
||
### Shape
|
||
|
||
`.year-rows` becomes the grid owner:
|
||
|
||
```css
|
||
.year-rows {
|
||
display: grid;
|
||
/* year | track | name | PL left | vacation group | chevron */
|
||
grid-template-columns: 3.5rem minmax(0, 1fr) auto auto auto var(--icon-sm);
|
||
}
|
||
```
|
||
|
||
Each row spans it and re-exposes it:
|
||
|
||
```css
|
||
.year-row { /* the <details> */
|
||
grid-column: 1 / -1;
|
||
display: grid;
|
||
grid-template-columns: subgrid;
|
||
}
|
||
.year-row__summary {
|
||
grid-column: 1 / -1;
|
||
display: grid;
|
||
grid-template-columns: subgrid;
|
||
/* keep: align-items, column-gap, row-gap, padding, font-weight */
|
||
}
|
||
.year-row__body { grid-column: 1 / -1; }
|
||
```
|
||
|
||
Column placement inside the summary shifts to match the six tracks: year `1`, track `2`,
|
||
`.year-row__figures` `grid-column: 3 / 6` + `grid-template-columns: subgrid` (keep
|
||
`display: grid`, `align-items: baseline`, `white-space: nowrap`; drop its own
|
||
`auto auto auto`), chevron `::after` `grid-column: 6`. `.year-row__parent { display: contents }`
|
||
stays — each parent's three spans land in the three shared columns.
|
||
|
||
Notes:
|
||
- `--sp-4` column-gap must be declared on `.year-rows` as well, since a subgrid inherits the
|
||
parent's gaps unless it sets its own; keep the summary's `column-gap` so the values agree.
|
||
- `.year-rows > .disclosure:last-child { border-bottom: none }` and the `.disclosure` hairlines
|
||
in `primitives.css` are unaffected (borders on the `details` still paint).
|
||
- In the solo case `.year-row__name` isn't rendered; that column collapses to `0` for every row —
|
||
still uniform.
|
||
- Left-over `grid-row: 1` declarations on year/track/figures stay valid.
|
||
|
||
### Fallback
|
||
|
||
Wrap the promotion in a support check so older engines keep today's (merely ragged) layout rather
|
||
than collapsing:
|
||
|
||
```css
|
||
@supports (grid-template-columns: subgrid) { /* the rules above */ }
|
||
```
|
||
|
||
Keep the current `.year-row__summary` rule as the base; the `@supports` block overrides it.
|
||
|
||
### Mobile
|
||
|
||
`responsive.css` already re-lays the summary as `3rem minmax(0, 1fr) var(--icon-sm)` with the
|
||
figures wrapped to row 2 as a flex column. Inside that media query, reset the new rules:
|
||
`.year-rows { display: flex; flex-direction: column }` and
|
||
`.year-row { display: block }` — so the mobile block's existing declarations apply unchanged.
|
||
Place these resets after the `@supports` block in source order, or repeat them inside their own
|
||
`@supports` guard, so specificity/order lets mobile win.
|
||
|
||
## Verification
|
||
|
||
1. `cd frontend && npm run dev`, open the Dashboard Overview tab with the demo workspace
|
||
(`demo@example.com`) — delegate the browser pass to a Sonnet subagent (never drive Chrome from
|
||
the coordinator).
|
||
2. Check: every year's track left and right edge align to the pixel, including 2029 (shortest
|
||
figures) vs 2025 (no expiring) vs a row with `expiring`; the "PL left" and "Vacation left"
|
||
labels form straight columns.
|
||
3. Repeat in **both** Swedish and English (longer sv strings are the real stress test), and in a
|
||
solo workspace (no parent names) as well as a couple workspace.
|
||
4. Narrow to the mobile breakpoint and confirm figures still wrap under the track, one parent per
|
||
line (use the same-origin iframe trick — `resize_window` is a no-op in this setup).
|
||
5. Gates (delegate to a Haiku subagent, raw output): from `frontend/` `npm run typecheck`,
|
||
`npm run lint`, `npm run coverage`. CSS-only change — `YearRows.test.tsx` and `Dashboard.test.tsx`
|
||
should be untouched and green.
|