On the phone the D100 was found, listed, and completely unreachable: it
sat below the fold and nothing scrolled.
.screen declared grid-template-rows: auto auto 1fr but has four children
— header, ClickPanel, the trainer gate, the list. The gate is
conditional, so whenever it rendered it took the 1fr track and the list
fell into an implicit auto row past the bottom of the screen. overflow-y
was on the list, which was not the box overflowing, so there was nothing
to scroll. On a desktop window everything fit and the bug never showed;
on a 412px viewport the Click panel alone is taller than the screen.
Flex has no fixed track count, so a conditional child cannot displace
anything — the same reason .ride is a column and not a grid.
On compact the whole screen scrolls as one document rather than pinning a
header above a scrolling list. Giving the list its own scroll region
there would leave it a few pixels tall: technically scrollable, still
unusable.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>