A repository's files page fits a 390 px phone: long paths and file names wrap, a file's code scrolls inside its box, never the page #9497

The files page now wraps long names and keeps code in its own scrolling box at 390 px. The Chromium case was skipped here because no Chromium starts in this sandbox, so I haven't seen its scrollWidth <= innerWidth line; the forge's check will print it.

What changed

• src/web/style/content.ts:

- .code-layout now sets overflow-wrap: anywhere. - Its main column children get min-width: 0. - The file header bar can wrap. - .code already had overflow-x: auto, so code scrolls in its own box and no change was needed there. - Every rule hangs off the existing .code-layout, so no other page is touched and no new component class is added.

• test/tree-fit.test.ts is new. It seeds a 250-character file name, a 250-character directory inside a 120-character directory, a 290-character code line and 40 or more rows.

- It renders the directory listing (/alice/fit/tree/main) and the file view (/alice/fit/blob/main/code.ts). The file view lives under /blob/; /tree/ on a file path returns not-found. - It checks that neither page has an inline width or min-width, and that no shipped rule fixes a width over 390 px. - It checks that the wrap rule and the .code scroll rule exist. - The Chromium case loads both pages at 390x844 and asserts no element outside .code overflows and the page doesn't scroll sideways. For the file view it also asserts the code box itself scrolls.

Checks

• Before the CSS change, the wrap-rule test failed and the other two tests passed, so the no-fixed-width part pins what was already true.
• Passing: test/tree-fit.test.ts, the issues, milestones, repo-head, waves, pulls and commits *-fit tests, code.test.ts, web-code.test.ts, tree-listing.test.ts, bun scripts/design-lint.ts, bun x tsc --noEmit and bun scripts/gate.ts.
• I ran the named tests rather than bun test over the whole suite, and left that to the forge's check.

Not done: src/web/pages/browse.ts and src/web/code.ts are untouched, and the preview looks list is unchanged.

Closes #9376

The files page now wraps long names and keeps code in its own scrolling box at 390 px. The Chromium case was skipped here because no Chromium starts in this sandbox, so I haven't seen its scrollWidth <= innerWidth line; the forge's check will print it.

What changed

• src/web/style/content.ts:

- .code-layout now sets overflow-wrap: anywhere. - Its main column children get min-width: 0. - The file header bar can wrap. - .code already had overflow-x: auto, so code scrolls in its own box and no change was needed there. - Every rule hangs off the existing .code-layout, so no other page is touched and no new component class is added.

• test/tree-fit.test.ts is new. It seeds a 250-character file name, a 250-character directory inside a 120-character directory, a 290-character code line and 40 or more rows.

- It renders the directory listing (/alice/fit/tree/main) and the file view (/alice/fit/blob/main/code.ts). The file view lives under /blob/; /tree/ on a file path returns not-found. - It checks that neither page has an inline width or min-width, and that no shipped rule fixes a width over 390 px. - It checks that the wrap rule and the .code scroll rule exist. - The Chromium case loads both pages at 390x844 and asserts no element outside .code overflows and the page doesn't scroll sideways. For the file view it also asserts the code box itself scrolls.

Checks

• Before the CSS change, the wrap-rule test failed and the other two tests passed, so the no-fixed-width part pins what was already true.
• Passing: test/tree-fit.test.ts, the issues, milestones, repo-head, waves, pulls and commits *-fit tests, code.test.ts, web-code.test.ts, tree-listing.test.ts, bun scripts/design-lint.ts, bun x tsc --noEmit and bun scripts/gate.ts.
• I ran the named tests rather than bun test over the whole suite, and left that to the forge's check.

Not done: src/web/pages/browse.ts and src/web/code.ts are untouched, and the preview looks list is unchanged.

The failed check was the gate rule that wants a "Try:" line in a commit message. I added an empty commit carrying that line and pushed it. bun scripts/gate.ts printed nothing when I ran it locally. I didn't re-run the test suite, since the new commit changes no files.

What changed: the files page now wraps long names and keeps code scrolling inside its own box at 390 px. The one CSS change is a handful of rules on .code-layout in src/web/style/content.ts, which keeps them off other pages.

Test: test/tree-fit.test.ts is new. It seeds a 250-character file name, nested long directory names, a 290-character code line and 40 or more rows. It covers the directory listing and the file view, and checks that no inline or shipped width goes over 390 px. It also checks that the wrap and scroll rules exist.

Chromium case: it measures both views at 390x844 and asserts no sideways scroll, and that the code box scrolls on the file view. It was skipped in my sandbox because no Chromium starts here, so I haven't seen its printed line. The forge's check will print it.

What the test pinned: the wrap-rule test failed before the CSS change. The no-fixed-width tests passed before it, so those pin what was already true.

Not done: I left src/web/pages/browse.ts and src/web/code.ts alone and didn't change the preview looks.

Try: open /trevato/forge/tree/main and a file under /trevato/forge/blob/main/ on the preview at 390 px. Long names wrap and code scrolls in its box.

🤖 Generated with Claude Code

Left #9376 open: 1 unticked item remain (Like test/milestones-fit.test.ts, a Chromium-measured case (skipped where no Chromium) loads the page at 390x844 and asserts scrollWidth <= innerWidth; the pull says in one line what it printed.).