Four widths (4/6/8/12) put four different card sizes on one page, and the
4-vs-6 difference read as inconsistency rather than intent. There are now
two: every card is half-width and pairs down the page, and only Monitor
status is full-width because it lays six counts across a single row.
Currently down is half-width too. Seven columns would crush the monitor
name there, so its rows are now two lines — name and downtime lead, with
type, status code and the sparkline in a quieter line beneath. No
information is lost.
This collapses the layout logic: two halves fill a row exactly and a full
card fills its own, so nothing is ever stretched to close a gap. The only
remaining decision is a lone trailing half, promoted to full so the page
does not end ragged. Verified across the catalogue, the non-admin subset,
the defaults and single-card cases: no mid-page gaps anywhere.
Componentization — there was real duplication:
- StatLine was defined twice and MetricLine was a third copy of the same
thing. All three are now CardStatLine.
- A label + value + bar row appeared five times across the breakdown and
ranking cards. It is now CardMeterRow.
- Monitors by type and by group were the same card over different keys,
so they share a BreakdownCard shell. Between them they drop from 232
lines to 83.
Titles, checked against what each card actually renders:
- Checks on schedule -> Check queue. It reports queue jobs and workers,
not the checks themselves.
- Maintenance -> Maintenance windows, Team -> Team members. Bare nouns
read as navigation rather than as what the card reports.
- The picker no longer borrows the sidebar's group labels. The Logs page
hosts logs, queue and diagnostics tabs, so "Logs" misdescribed the
three cards under it; that group is now "System". Checkmate server
keeps its name — it does report on the server process.
Picker buttons: Reset to defaults moves to the left, away from Done,
since a destructive action should not sit next to the one people reach
for by reflex. Done becomes the primary contained button. Dialog gains an
optional cancelSx to allow that placement.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
gorkem-bwl
e4718b814f