With a hundred notes in it the list grew to its full height, the page
scrolled instead of the list, and the editor — a flex sibling stretching
to the row — became as tall as every note put together: 12419px next to
a 700px window.
The cause was one word. `body` had `min-height: 100dvh`, which leaves
the page free to grow with its content, and a column of flex boxes with
no definite height at the top cannot cap anything below it. `min-height:
0` on the items lets them shrink but nothing was telling them what to
shrink *to*. The page now has a definite height and no scrolling of its
own, so the two panes do the scrolling, which is what they were built
for. The settings screen and the login screen scroll themselves, having
no pane.
While there: the editor's floor drops from 12rem to 6rem so a landscape
phone with its keyboard up keeps the toolbar and the save button on
screen rather than overflowing, and the login card centres with `margin:
auto` rather than `justify-content`, because a centred flex item in a
scrolling container cannot be scrolled back to once it overflows the
top.
Reproduced with 123 seeded day notes and measured in Firefox at 1100px
and 390px, before and after: page 12684px → 700px, list scrolls itself,
editor 12419px → 435px, toolbar and save button still on screen.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
bafad9b72d