- Shipped
- August 12, 2026 at 8:32 PM UTC
- Author
- kamo
- Commit
- 3d09039
Every figure on the masthead and the four pillar cards was its own stacked box — Operator Label above, value below. Operator Labels are uppercase with 0.12em tracking, so inside a card column "Overdue" occupies one line, "Execution incomplete" two and "No attempts left" three, and each value therefore started wherever its own label happened to end. Read across a row, the numbers were at three different heights. FigureRow places labels, values and hints into EXPLICIT rows of ONE grid instead: the label row sizes to the tallest label, so every value beneath it starts at the same y whatever its own label needed, and alignSelf: 'end' keeps a one-line label against its value rather than floating at the top of a two-line track. Preferred over a min-height reserve, which a longer translation defeats silently and which still breaks the moment one label takes a line more than budgeted. Row gaps are zero and the band spacing rides on margins deliberately: row-gap applies between every adjacent pair of rows, including the label/value pair and the empty hint rows, which is the ragged spacing the explicit placement removes. The arithmetic is a separate pure module with tests, because it is the part that can be wrong without looking wrong until a particular viewport is opened — the guard that matters most is that a responsive column count always emits xs, since below the first breakpoint MUI emits nothing and an unset grid-row is not "row 1", it is auto-placement, which scatters a figure's own three parts. Two layout consequences worth naming. Training's four figures go two-up from xl, where the pillars themselves are four-wide and the card is a quarter of the page — four labels in ~78px each is where the three-line wraps came from. And the masthead's as-of stamp is no longer a full quarter-width column; it takes what it needs on the right and gives the rest back to the pay-period range.