The owner's /notes page fits a 390 px phone: no sideways scroll, a long note wraps #9392

The owner's /notes page now wraps long notes at 390 px. No Chromium starts in my sandbox, so I never measured it on a phone. I have no measured answer to whether it scrolls sideways. The forge's check should run the phone measurement. The preview look is at https://lab--9352--forge-trevato-apps.open-platform.sh/notes once the preview deploys.

What changed

• Wrapping: the page is wrapped in [data-notes], an attribute, not a class. Inside it, long words break anywhere and a row's title and meta wrap instead of ending in the list's one-line ellipsis. Rows align to their top, so the badge and the overrule button sit by the first line.
• Why a long note failed: the title is cut to 200 characters, but a 300-character word is still unbroken, so it needed the wrapping rule.
• No fixed width: nothing in the page or its stylesheets fixes a width over 390 px. I exported the page's CSS as NOTES_CSS so the test can read it.
• Docs: I added a section to docs/design/areas/notes.md. No new class.
• Untouched: no route, no data read, and nothing in src/http/api.ts.

Test: test/notes-fit.test.ts seeds a 300-character word, a long sentence and 40 notes. It asserts:

• no inline width, and no shipped rule over 390 px;
• overflow-wrap: anywhere on the container;
• wrapping allowed on a row's title and meta.

It also has a Chromium measurement of the page at 390x844, which skips here. The new test, the existing notes tests, tsc and bun scripts/design-lint.ts pass.

Left out: I did not add an owner phone look for /notes to src/spawn/preview-looks.ts, since the issue scoped the files to notes.ts, the notes doc and one test file. Unlike /resilience (#9362), /notes is therefore not yet taken as a look on every preview.

🤖 Generated with Claude Code

Closes #9352

The owner's /notes page now wraps long notes at 390 px. No Chromium starts in my sandbox, so I never measured it on a phone. I have no measured answer to whether it scrolls sideways. The forge's check should run the phone measurement. The preview look is at https://lab--9352--forge-trevato-apps.open-platform.sh/notes once the preview deploys.

What changed

• Wrapping: the page is wrapped in [data-notes], an attribute, not a class. Inside it, long words break anywhere and a row's title and meta wrap instead of ending in the list's one-line ellipsis. Rows align to their top, so the badge and the overrule button sit by the first line.
• Why a long note failed: the title is cut to 200 characters, but a 300-character word is still unbroken, so it needed the wrapping rule.
• No fixed width: nothing in the page or its stylesheets fixes a width over 390 px. I exported the page's CSS as NOTES_CSS so the test can read it.
• Docs: I added a section to docs/design/areas/notes.md. No new class.
• Untouched: no route, no data read, and nothing in src/http/api.ts.

Test: test/notes-fit.test.ts seeds a 300-character word, a long sentence and 40 notes. It asserts:

• no inline width, and no shipped rule over 390 px;
• overflow-wrap: anywhere on the container;
• wrapping allowed on a row's title and meta.

It also has a Chromium measurement of the page at 390x844, which skips here. The new test, the existing notes tests, tsc and bun scripts/design-lint.ts pass.

Left out: I did not add an owner phone look for /notes to src/spawn/preview-looks.ts, since the issue scoped the files to notes.ts, the notes doc and one test file. Unlike /resilience (#9362), /notes is therefore not yet taken as a look on every preview.

🤖 Generated with Claude Code

The owner's /notes page now wraps long notes at 390 px instead of scrolling sideways. The check failed only because no commit carried a Try: line. I added an empty commit with that line and pushed, and the forge will re-run the check. I could not measure the phone width here because no Chromium starts in my sandbox.

bun scripts/gate.ts printed nothing when I ran it locally after the new commit. The new test and the notes tests passed before it.

What changed

• Wrapping: the page is wrapped in [data-notes]. Inside it, long words break anywhere and a row's title and meta wrap instead of ending in the one-line ellipsis. Rows align to their top, so the badge and overrule button sit by the first line. There is no fixed width over 390 px, and no new class.
• Test: test/notes-fit.test.ts seeds a 300-character word, a long sentence and 40 notes. It checks that no inline or shipped rule fixes a width over 390 px, that the container uses overflow-wrap: anywhere, and that row title and meta may wrap. It also has a Chromium measurement at 390x844, which skips where no Chromium starts.
• Docs: docs/design/areas/notes.md gains a section on the 390 px rule.
• Untouched: no route, no data read, and nothing in src/http/api.ts.

Left out: I did not add an owner phone look for /notes to src/spawn/preview-looks.ts, since the issue scoped the files to notes.ts, the notes doc and one test file.

Try it: open https://lab--9352--forge-trevato-apps.open-platform.sh/notes at a 390 px width, signed in. Save a 300-character word as a note. It should wrap and the page should not scroll sideways.

Left #9352 open: 1 unticked item remain (The pull description links the preview's phone look of /notes, and says in one line whether it scrolls sideways.).