Twenty-five columns of figures and not one of them is named on screen. A viewer cannot tell Gap
from Interval, Last from Best, or which of the three Best columns belongs to which sector.
The design system already specifies the header. web/design-system/timing-screen.html:58 defines
<div class="driver-row-header"> with all twenty-five labels in order — Pos, (change), (team),
No, Driver, State, Gap, Gap trend, Int, Last, Lap trend, Best, S1, Best, S2, Best, S3, Best, Trap,
Tyre, Age, St, Pit, Deg trend, Laps — and web/design-system/components/driver-row/driver-row.css
styles it against the same grid the rows use.
web/timing-screen.ts and web/index.html never render it. Neither file contains the string
header. So the rows are laid against the twenty-five-column grid correctly and the header that
names those columns was simply never carried across from the design system into the application.
ADR-0010 makes the design system the specification for what the screen looks like. This is a place
the application does not match it, and the gap is invisible to the tests: test/design-system.test.sh
checks the design system's own markup, and test/timing-screen.test.sh asserts column order
(Gap sits left of Interval, in the order the header names the columns) without ever asserting
that a header is rendered.
Acceptance
- The Timing screen renders the header the design system defines, in the same order, against the
same grid, so a label sits above the column it names at every viewport the density budget covers.
- The header stays put when the field scrolls. A header that scrolls away has not solved the
problem it exists for.
test/timing-screen.test.sh asserts the header is present and that its labels line up with the
cells beneath them — the assertion the current column-order test assumes but does not make.- The header reads the same list the rows do, rather than restating twenty-five strings that can
drift from the row markup independently.
Assisted-by: Claude Opus 5 (reasoning: high)
Twenty-five columns of figures and not one of them is named on screen. A viewer cannot tell Gap
from Interval, Last from Best, or which of the three
Bestcolumns belongs to which sector.The design system already specifies the header.
web/design-system/timing-screen.html:58defines<div class="driver-row-header">with all twenty-five labels in order — Pos, (change), (team),No, Driver, State, Gap, Gap trend, Int, Last, Lap trend, Best, S1, Best, S2, Best, S3, Best, Trap,
Tyre, Age, St, Pit, Deg trend, Laps — and
web/design-system/components/driver-row/driver-row.cssstyles it against the same grid the rows use.
web/timing-screen.tsandweb/index.htmlnever render it. Neither file contains the stringheader. So the rows are laid against the twenty-five-column grid correctly and the header thatnames those columns was simply never carried across from the design system into the application.
ADR-0010 makes the design system the specification for what the screen looks like. This is a place
the application does not match it, and the gap is invisible to the tests:
test/design-system.test.shchecks the design system's own markup, and
test/timing-screen.test.shasserts column order(
Gap sits left of Interval, in the order the header names the columns) without ever assertingthat a header is rendered.
Acceptance
same grid, so a label sits above the column it names at every viewport the density budget covers.
problem it exists for.
test/timing-screen.test.shasserts the header is present and that its labels line up with thecells beneath them — the assertion the current column-order test assumes but does not make.
drift from the row markup independently.
Assisted-by: Claude Opus 5 (reasoning: high)