-
Notifications
You must be signed in to change notification settings - Fork 0
README
Frames of the actual packages/cli/assets/templates/pages/detail-page/page.tsx,
rendered by apps/template-viewer (a Vite app that globs the templates directory and
renders the file itself, with @astryxdesign/core aliased to source). Not a
reconstruction, not a Storybook repro story.
Viewport 1440×1000, dpr 3, neutral theme, light. Every PNG was taken through
captureWithSensors, so each has a .sensors.json receipt asserting build SHA,
route, theme, colour mode, direction, viewport, target count and semantic state
before the shutter. All receipts agree on every sensor except Build (and
Direction for the RTL frames).
-
magenta — the
LayoutHeader's content inset, where#1001and the metadata line sit. A tab label belongs on this line. - cyan — the padded container's box edge. A bled strip's box belongs on this line.
- green — the tab labels' vertical centre. Anything else in the row belongs on it.
| Arm | Build | What it is |
|---|---|---|
| A | 58f95421362 |
main today — tabsRow: {marginInline: -12, marginBottom: -16, marginTop: 12}
|
| B | edbc7d8c8ce |
PR #3938 as written — isFullBleed (inline bleed only), template drops marginInline
|
| C | 1d433a2457b |
both halves off the container vars, tabsRow deleted entirely, row at vAlign="end"
|
| C2 | 0db08eed4af |
as C, but the row left at vAlign="center"
|
| C3 | baa1d927b52 |
as C, plus the row restructured: strip is a direct header child, panel toggle moved to the actions row |
PR #3938's own branch is based on an older main (it edits packages/cli/templates/…,
which is now packages/cli/assets/templates/…), so arm B is the PR's exact
TabList.tsx and template change ported onto today's main.
| File | What it shows |
|---|---|
compare-start.png |
First tab label against the content inset, A/B/C/C3 stacked |
compare-row.png |
The whole tab row with the centre line — where the panel toggle sits |
compare-end.png |
The end edge close up, all five arms |
compare-rtl.png |
The same start-edge comparison in RTL |
compare-page.png |
Whole page, four arms |
<arm>-page.png full viewport · <arm>-start.png start edge, guided ·
<arm>-row.png whole row with the centre line · <arm>-end.png end edge ·
<arm>-rtl-*.png the same in RTL.
A-main-hover-start.png / C-honest-hover-start.png — first tab hovered, so the
background pill's start edge is visible.
| A | B | C | C2 | C3 | |
|---|---|---|---|---|---|
| strip box vs box edge | +4 | 0 | 0 | 0 | 0 |
| first label vs content inset | 0 | −4 | 0 | 0 | 0 |
| underline start vs content inset | 0 | −4 | 0 | 0 | 0 |
| strip bottom above header divider | 1 | 1 | 1 | 7 | 1 |
| panel toggle centre, from header top | 133.98 | 133.98 | 119.98 | 119.98 | n/a — moved |
| tab centre, from header top | 133.48 | 133.48 | 133.48 | 127.48 | 121.48 |
| header height | 152.98 | 152.98 | 152.98 | 152.98 | 140.98 |