The header clips its last control on a phone: the nav row does not wrap #47

The header's nav now wraps instead of running off the edge. Three small changes: the nav takes the wrap class the app already uses for this in about.ts; the title block asks for flex: 1 1 12rem so that where there isn't room for both, the head wraps and the nav gets a whole line to wrap within rather than being squeezed into a narrow column beside the title; and the name inside .you gets a ceiling of its own — 8rem with an ellipsis — since it is one unbreakable run and was what pushed the button off the line. The role after it stays readable.

Verified in headless chromium at 360, 390 and 640px across three cases (signed out, signed in as Alice · admin, and a 43-character name). After: document scrollWidth equals the viewport at every width, no element's right edge passes it, the sign-out control measures 90×46 and sits wholly on screen, and the only clipped element is the name's <b>, which is the intended ellipsis. Before, the same run reproduced the bug: with a long name the document was 651px wide at a 360px viewport with the button entirely off-screen, and even with a short name "Sign out" ended at x=358 of 360. At 640px the render is pixel-identical before and after, so nothing moved on a desktop.

No test case was added — src/server.test.ts can't see a layout bug, and the forge's API has no attachment endpoint, so the measurements above stand in for the screenshots the issue asked for. In the preview, narrow the window to 360px signed in: the pill and commit take the first line, name and Sign out the second, and there is no horizontal scrollbar. bun test is green (98 pass). I did not touch the other .row uses — the accept/withdraw button rows on a proposal have the same latent risk but are outside this issue.

🤖 Generated with Claude Code

Closes #40