The commits list and a commit's page fit a 390 px phone: messages wrap, a diff scrolls inside its box, never the page #9361

The commits list and a commit's page now wrap long text on a 390 px phone. A diff keeps scrolling inside its own .diff-body, not the page.

Preview: https://lab--9348--forge-trevato-apps.open-platform.sh/preview-admin/sample/commits. I did not open this preview or look at its phone view, so I can't say whether it scrolls sideways. The new test checks the CSS and markup the pages ship, not a rendered viewport. The preview URL is my guess from the other previews' pattern.

What changed

• src/web/pages/commits.ts:

- What changed: a new COMMITS_CSS is applied to the commits list, a commit's page and both live-browse pages. Commit rows and the commit header card sit in a [data-commits] wrapper. Inside it, long text breaks anywhere, and a row's subject and author line may wrap instead of ending in an ellipsis. Rows align to the top, and the header's h2 can shrink. - Unchanged: routes and data reads, and src/http/api.ts. - Classes: none are new, so only a note was added to docs/design/areas/diff.md.

• test/commits-fit.test.ts (new): seeds 12 commits, including one with a 300-character unbroken word as subject and body, and one with a long subject.

- Both pages: the test asserts there is no inline or shipped width over 390 px, and that [data-commits] has overflow-wrap: anywhere and rows have white-space: normal. It also checks that .diff-body has overflow-x: auto. - Without the fix: the container assertions fail, because data-commits and its CSS did not exist.

• src/spawn/preview-looks.ts: PREVIEW_COMMITS_PAGE is added to the owner's phone and desktop looks, as the pulls list does. This file is outside the issue's file list; the test pins it.

Checks: bun x tsc --noEmit, bun scripts/gate.ts and bun scripts/design-lint.ts pass. The new test and the commit pages' existing tests pass (45 pass, 0 fail). test/looks-owner.test.ts prints "Cannot use a closed database" errors while passing. The forge runs the rest.

Not done: I left alone the diff's file-path ellipsis (.diff-path), which cuts a long path on one line, and the sibling pages.

🤖 Generated with Claude Code

Closes #9348

The commits list and a commit's page now wrap long text on a 390 px phone. A diff keeps scrolling inside its own .diff-body, not the page.

Preview: https://lab--9348--forge-trevato-apps.open-platform.sh/preview-admin/sample/commits. I did not open this preview or look at its phone view, so I can't say whether it scrolls sideways. The new test checks the CSS and markup the pages ship, not a rendered viewport. The preview URL is my guess from the other previews' pattern.

What changed

• src/web/pages/commits.ts:

- What changed: a new COMMITS_CSS is applied to the commits list, a commit's page and both live-browse pages. Commit rows and the commit header card sit in a [data-commits] wrapper. Inside it, long text breaks anywhere, and a row's subject and author line may wrap instead of ending in an ellipsis. Rows align to the top, and the header's h2 can shrink. - Unchanged: routes and data reads, and src/http/api.ts. - Classes: none are new, so only a note was added to docs/design/areas/diff.md.

• test/commits-fit.test.ts (new): seeds 12 commits, including one with a 300-character unbroken word as subject and body, and one with a long subject.

- Both pages: the test asserts there is no inline or shipped width over 390 px, and that [data-commits] has overflow-wrap: anywhere and rows have white-space: normal. It also checks that .diff-body has overflow-x: auto. - Without the fix: the container assertions fail, because data-commits and its CSS did not exist.

• src/spawn/preview-looks.ts: PREVIEW_COMMITS_PAGE is added to the owner's phone and desktop looks, as the pulls list does. This file is outside the issue's file list; the test pins it.

Checks: bun x tsc --noEmit, bun scripts/gate.ts and bun scripts/design-lint.ts pass. The new test and the commit pages' existing tests pass (45 pass, 0 fail). test/looks-owner.test.ts prints "Cannot use a closed database" errors while passing. The forge runs the rest.

Not done: I left alone the diff's file-path ellipsis (.diff-path), which cuts a long path on one line, and the sibling pages.

🤖 Generated with Claude Code

The commits list and a commit's page now wrap long text on a 390 px phone, and the diff scrolls inside its own .diff-body, not the page. The earlier push failed the gate because no commit message had a "Try:" line. I added an empty commit carrying one and pushed. bun scripts/gate.ts now passes locally; I did not re-run the full check.

What changed

• src/web/pages/commits.ts: a new COMMITS_CSS is applied to the commits list, a commit's page and both live-browse pages. Commit rows and the commit header card sit in a [data-commits] wrapper.

- A long word breaks anywhere inside it. - A row's subject and author line may wrap instead of ending in an ellipsis. - Rows align to the top, and the header's h2 can shrink. - Routes and data reads are unchanged, and src/http/api.ts is untouched.

• test/commits-fit.test.ts (new): seeds 12 commits, including one with a 300-character unbroken word as subject and body, and one with a long subject. For both pages it asserts:

- no inline or shipped width over 390 px; - [data-commits] has overflow-wrap: anywhere; - rows have white-space: normal; - .diff-body has overflow-x: auto.

The container assertions fail without the fix, because data-commits and its CSS did not exist.

• src/spawn/preview-looks.ts: the commits list is added to the owner's phone and desktop looks, as the pulls list does. This file is outside the issue's file list; the test pins it.
• docs/design/areas/diff.md: a note that no new class was added.

bun x tsc --noEmit, bun scripts/design-lint.ts and the commit pages' existing tests passed before the first push.

Sideways scroll: I did not open the preview or look at its phone view, so I can't say whether it scrolls sideways. The test checks the CSS and markup the pages ship, not a rendered viewport.

Try: open https://lab--9348--forge-trevato-apps.open-platform.sh/preview-admin/sample/commits and then a commit's page at 390 px width. That URL is my guess from the other previews' pattern.

Not done: the diff's file-path ellipsis (.diff-path) still cuts a long path on one line, and I left the sibling pages alone.

🤖 Generated with Claude Code

The commits list and a commit's page no longer scroll the page sideways at 390 px. I haven't looked at the page in a browser at that width. My evidence is the CSS, the tests and a fetch of the preview.

Preview: https://lab--9361--forge-trevato-apps.open-platform.sh/preview-admin/sample/commits. The earlier lab--9348--… link was a guess and is wrong.

Scrolls sideways at 390 px: no.

• Fetching the 9361 preview shows data-commits and overflow-wrap: anywhere in the served page.
• The commits list and the commit page both wrap their messages, titles and authors inside [data-commits].
• A diff scrolls inside its own .diff-body box, not the page.
• The owner's phone look for this pull, /preview-admin/sample/commits, is the same page.

What changed this round: a new test in test/commits-fit.test.ts checks the commit body, the 300-character word in the message. It asserts three things:

• The body sits inside <div data-commits>, after its opening tag.
• It comes before the diff.
• The message <pre> has white-space: pre-wrap; overflow-wrap: anywhere.

I did not need to change the code. The body was already inside the container; only the header card was visibly wrapped.

Checks: bun test test/commits-fit.test.ts passes (8 tests) and tsc --noEmit is clean. I did not rerun scripts/design-lint.ts, and nothing under src/web/ changed this round.

How to try it: open the preview link at 390 px, or open any commit page whose message has a very long word.

Not done: no new component classes and no dependencies.

🤖 Generated with Claude Code

I merged main into the branch and pushed it. The one conflict, in src/spawn/preview-looks.ts, is resolved by keeping both sides.

The conflict: this pull's PREVIEW_COMMITS_PAGE and main's new PREVIEW_ISSUES_PAGE were both added to the PREVIEW_OWNER_LOOKS list. Both are in it now, each looked at on desktop and on phone.

Checks: tsc --noEmit is clean, and the scripts/gate.ts run printed nothing. The tests that cover the change pass: test/commits-fit.test.ts and the suites that import preview-looks. That's 56 pass, 4 skipped, 0 fail. I did not run the whole suite; the forge runs it on the push.

The commits list and commit page still fit a 390 px phone as described earlier. Nothing else in the pull changed. To try it, open https://lab--9361--forge-trevato-apps.open-platform.sh/preview-admin/sample/commits at 390 px once the preview redeploys.

🤖 Generated with Claude Code

Left #9348 open: 1 unticked item remain (A test renders the commits list and a commit's page with seeded long content: a 300-character unbroken word, a long title, many rows. It asserts that no inline width/min-width and no rule the page ships fixes a width over 390 px, and that the long-text containers carry overflow-wrap: anywhere (or break-word); code, logs and diffs may instead scroll inside their own box (overflow-x: auto on that box). It fails without the fix, or, if the page already fits, it pins that.).