fix(web): space the admin stat cards on the page rhythm

Claude-Run commented

2026-08-06 06:00:45 +02:00

Member

The reported symptom is dashboard cards sitting a pixel or two into each other instead of having spacing between them. Measuring the current markup in a headless browser (Chrome, 500/768/1024/1400/1920px) shows no container that actually overlaps: every card grid and card stack in the authenticated shells separates its cards by exactly 24px. BUNYIP-472 (F1/F25) already pulled /dashboard off space-y-8 and gap-4 lg:grid-cols-2, which is the cramped-layout half of this report.

What was left is the last card grid still off that rhythm: the admin dashboard's four stat tiles were gap-4, so they sat 16px apart, a third closer than the Datasets and Recent Activity cards directly below them. Aligned to gap-6 (measured 16px -> 24px). The tiles moved into a pure stats_grid alongside the existing datasets_card, and the /dashboard "Your Applications" grid into dashboard_apps_grid, so both card containers are unit-testable instead of being buried in an async handler.

Nothing enforced the rhythm mechanically, which is how one grid drifted and stayed drifted. views::ui::assert_cards_are_spaced is the guard: it walks rendered markup, and fails when a container of two or more sibling cards declares no gap-6 / space-y-6 (cards whose 1px borders touch are exactly what reads as a one-or-two-pixel overlap), or when a card carries a negative margin that pulls it over its neighbour. Applied to the /dashboard application grid, the admin stat grid, admin_block_grid, and the onboarding step stack; two should_panic tests prove the guard rejects both failure shapes rather than passing vacuously.

Card containers swept across bunyip-web: every authenticated stack (/dashboard, /applications, /membership, /settings, the 2FA flows, onboarding, and all eleven admin screens) is space-y-6; every authenticated grid is gap-6 after this change. Single-card pages and the fixed feedback launcher have no sibling to overlap. The public marketing pages keep their own wider rhythm (gap-8 on pricing and the apps strip) and are out of scope here.

#BUNYIP-367

The reported symptom is dashboard cards sitting a pixel or two into each other instead of having spacing between them. Measuring the current markup in a headless browser (Chrome, 500/768/1024/1400/1920px) shows no container that actually overlaps: every card grid and card stack in the authenticated shells separates its cards by exactly 24px. BUNYIP-472 (F1/F25) already pulled /dashboard off `space-y-8` and `gap-4 lg:grid-cols-2`, which is the cramped-layout half of this report. What was left is the last card grid still off that rhythm: the admin dashboard's four stat tiles were `gap-4`, so they sat 16px apart, a third closer than the Datasets and Recent Activity cards directly below them. Aligned to `gap-6` (measured 16px -> 24px). The tiles moved into a pure `stats_grid` alongside the existing `datasets_card`, and the /dashboard "Your Applications" grid into `dashboard_apps_grid`, so both card containers are unit-testable instead of being buried in an async handler. Nothing enforced the rhythm mechanically, which is how one grid drifted and stayed drifted. `views::ui::assert_cards_are_spaced` is the guard: it walks rendered markup, and fails when a container of two or more sibling cards declares no `gap-6` / `space-y-6` (cards whose 1px borders touch are exactly what reads as a one-or-two-pixel overlap), or when a card carries a negative margin that pulls it over its neighbour. Applied to the /dashboard application grid, the admin stat grid, `admin_block_grid`, and the onboarding step stack; two should_panic tests prove the guard rejects both failure shapes rather than passing vacuously. Card containers swept across bunyip-web: every authenticated stack (/dashboard, /applications, /membership, /settings, the 2FA flows, onboarding, and all eleven admin screens) is `space-y-6`; every authenticated grid is `gap-6` after this change. Single-card pages and the fixed feedback launcher have no sibling to overlap. The public marketing pages keep their own wider rhythm (`gap-8` on pricing and the apps strip) and are out of scope here. #BUNYIP-367

Claude-Run added 1 commit

2026-08-06 06:00:45 +02:00

fix(web): space the admin stat cards on the page rhythm

E2E PR gate / E2E / PR gate (pull_request) Successful in 24s

Details

Check / fmt + clippy + build + tests (pull_request) Successful in 4m44s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

e533ad7253

The reported symptom is dashboard cards sitting a pixel or two into each other instead of having spacing between them. Measuring the current markup in a headless browser (Chrome, 500/768/1024/1400/1920px) shows no container that actually overlaps: every card grid and card stack in the authenticated shells separates its cards by exactly 24px. BUNYIP-472 (F1/F25) already pulled /dashboard off `space-y-8` and `gap-4 lg:grid-cols-2`, which is the cramped-layout half of this report.

What was left is the last card grid still off that rhythm: the admin dashboard's four stat tiles were `gap-4`, so they sat 16px apart, a third closer than the Datasets and Recent Activity cards directly below them. Aligned to `gap-6` (measured 16px -> 24px). The tiles moved into a pure `stats_grid` alongside the existing `datasets_card`, and the /dashboard "Your Applications" grid into `dashboard_apps_grid`, so both card containers are unit-testable instead of being buried in an async handler.

Nothing enforced the rhythm mechanically, which is how one grid drifted and stayed drifted. `views::ui::assert_cards_are_spaced` is the guard: it walks rendered markup, and fails when a container of two or more sibling cards declares no `gap-6` / `space-y-6` (cards whose 1px borders touch are exactly what reads as a one-or-two-pixel overlap), or when a card carries a negative margin that pulls it over its neighbour. Applied to the /dashboard application grid, the admin stat grid, `admin_block_grid`, and the onboarding step stack; two should_panic tests prove the guard rejects both failure shapes rather than passing vacuously.

Card containers swept across bunyip-web: every authenticated stack (/dashboard, /applications, /membership, /settings, the 2FA flows, onboarding, and all eleven admin screens) is `space-y-6`; every authenticated grid is `gap-6` after this change. Single-card pages and the fixed feedback launcher have no sibling to overlap. The public marketing pages keep their own wider rhythm (`gap-8` on pricing and the apps strip) and are out of scope here.

#BUNYIP-367

Claude-Run merged commit 19accaf732 into main

2026-08-06 06:05:49 +02:00

Claude-Run deleted branch fix/BUNYIP-367-card-spacing

2026-08-06 06:05:49 +02:00

Claude-Run referenced this pull request from a commit

2026-08-06 06:05:49 +02:00

Merge pull request 'fix(web): space the admin stat cards on the page rhythm' (#490) from fix/BUNYIP-367-card-spacing into main

Rows
Columns

fix(web): space the admin stat cards on the page rhythm #490