86 lines
3.9 KiB
Markdown
86 lines
3.9 KiB
Markdown
# Task 01 — table framework CSS
|
|
|
|
Worktree: `/home/thallada/workspace/the-daily-epub-tables-css` (branch `tables-css`).
|
|
Read `00-shared.md` and `docs/dashboard-tables.md` first. Only `src/web/tailwind.css`
|
|
and the rebuilt `src/web/static/app.css` change in this task (plus your handoff).
|
|
The template audit happens in a sibling worktree; do not edit templates.
|
|
|
|
## 1. `.dashboard` becomes a content grid
|
|
|
|
Replace `.dashboard { @apply mx-auto my-8 max-w-7xl px-4 pb-6 … sm:px-6; }` with a
|
|
grid that keeps the page column pixel-identical to the header
|
|
(`mx-auto max-w-7xl px-4 sm:px-6` = content width `80rem - 2 * gutter`, centred):
|
|
|
|
```css
|
|
.dashboard {
|
|
--gutter: 1rem;
|
|
@apply my-8 grid pb-6 font-sans text-base leading-normal;
|
|
grid-template-columns:
|
|
[full-start] var(--gutter)
|
|
[wide-start] 1fr
|
|
[content-start] minmax(0, calc(80rem - 2 * var(--gutter)))
|
|
[content-end] 1fr
|
|
[wide-end] var(--gutter)
|
|
[full-end];
|
|
}
|
|
@media (width >= 40rem) { .dashboard { --gutter: 1.5rem; } } /* Tailwind `sm` */
|
|
.dashboard > * { grid-column: content; min-width: 0; }
|
|
.dashboard > .scroll-x { grid-column: wide; }
|
|
```
|
|
|
|
Keep `.dashboard > * + * { mt-4 }` and every other `.dashboard …` rule as they
|
|
are (margins on grid items work). Verify in the templates that nothing relied
|
|
on the old padding: `.save-bar` uses `-mx-4 sm:-mx-6` to bleed to the edges;
|
|
under the grid it still overflows its `content` area into the gutter columns
|
|
by the same amount, so leave it unless you see a problem. The `sm` breakpoint
|
|
is `40rem` in Tailwind v4 and `@media` rem is always 16px-based, so the query
|
|
above matches `sm:` exactly.
|
|
|
|
Prototype measured in Chromium and Firefox at 390/1280/2560: `h1` left edge and
|
|
width identical to today, no document overflow, table centred and wider than
|
|
the column only when its content needs it.
|
|
|
|
## 2. Tables shrink by wrapping; page-level tables may grow past the column
|
|
|
|
- Delete `.scroll-x > table { min-width:max-content; }`.
|
|
- Add, for the wide wrapper only:
|
|
|
|
```css
|
|
.dashboard > .scroll-x > table {
|
|
width: auto; /* shrink-to-fit */
|
|
min-width: min(100%, calc(80rem - 2 * var(--gutter)));
|
|
max-width: 100%;
|
|
margin-inline: auto;
|
|
}
|
|
```
|
|
|
|
A table narrower than the page column fills the column as today; a wider one
|
|
grows, centred, to the viewport edge; the wrapper scrolls only past that.
|
|
Tables that are not direct children (cards, disclosures, signal tables inside
|
|
cells) keep `w-full` from the base rule and simply wrap, then scroll.
|
|
|
|
## 3. Cell vocabulary (exactly four classes, see the doc's table)
|
|
|
|
- `.num` → `@apply text-right tabular-nums;` and `td.num { @apply whitespace-nowrap; }`.
|
|
Header cells with `.num` may wrap ("cache write", "matched articles").
|
|
- `.cell-tight` unchanged (`whitespace-nowrap`).
|
|
- `.cell-wrap` → `@apply min-w-[10rem] max-w-[32rem] whitespace-normal; overflow-wrap:anywhere;`
|
|
(ceiling raised from 24rem so titles get a single line when the screen has
|
|
room; `max-width` on a cell is honoured by Chromium and Firefox for the
|
|
column's max-content contribution — measured).
|
|
- `th` keeps wrapping (no nowrap); keep the sticky `thead`.
|
|
- `td > pre.preview { max-w-md }` and `.rating-cell` rules stay.
|
|
|
|
## 4. Small things to keep honest
|
|
|
|
- `.prose-body table` (reader pages) keeps its own rules; do not touch.
|
|
- Put a short comment above the table rules pointing at `docs/dashboard-tables.md`.
|
|
- `npm run css`, then `cargo build` (the binary embeds app.css) and
|
|
`cargo test --lib web::`. Router tests assert on markup, not on these rules,
|
|
so nothing should break; if something does, say what and why in the handoff.
|
|
- If you can run the dev server + `measure.mjs`, do it and paste the ≥1280 lines
|
|
for `/dashboard/articles`, `/dashboard/runs` and `/dashboard/runs/1` into the
|
|
handoff. With unchanged templates some tables will still scroll at 1280 —
|
|
that is expected until the template audit lands — but at 2560 the articles
|
|
and candidates tables must fit without scrolling.
|