A repository's head page wraps long names, descriptions and branch names at 390 px, pinned by a static test #9478

A repository's head page now has the wrapping rules to stay inside a 390 px phone, and test/repo-head-fit.test.ts checks them without a browser. I didn't measure it in Chromium, which is the next issue. The new test, bun scripts/gate.ts, bun scripts/design-lint.ts and bun x tsc --noEmit all pass. The forge's full check hasn't run yet. Without the new rules in src/web/style/content.ts, the new test fails.

CSS (src/web/style/content.ts)

• .repo-head, the About rail (.split > aside) and .split carry overflow-wrap: anywhere.
• The branch picker (.bar > .menu) can shrink, and its label truncates.
• README pre and table get max-width: 100%; overflow-x: auto, so they scroll inside their own box. Tables are display: block so the scroll applies.

Test

• It seeds /alice/fit with a 250-character description word, a 200-character branch, a 116-character file name (120 with .txt), 40 file rows, and a README with a 250-character word, a 300-character code line and a wide table.
• It also renders the empty-repository page with the same description.
• It asserts that:

- neither page has an inline width or min-width; - no shipped rule fixes a width over 390 px; - each of the rules above is present.

The commit carries the Try: line; bun scripts/gate.ts prints nothing.

Left out

• Chromium measurement of the real page width.
• The picker's open panel: its long items aren't constrained.

Try it: bun test test/repo-head-fit.test.ts.

🤖 Generated with Claude Code

Closes #9454

A repository's head page now has the wrapping rules to stay inside a 390 px phone, and test/repo-head-fit.test.ts checks them without a browser. I didn't measure it in Chromium, which is the next issue. The new test, bun scripts/gate.ts, bun scripts/design-lint.ts and bun x tsc --noEmit all pass. The forge's full check hasn't run yet. Without the new rules in src/web/style/content.ts, the new test fails.

CSS (src/web/style/content.ts)

• .repo-head, the About rail (.split > aside) and .split carry overflow-wrap: anywhere.
• The branch picker (.bar > .menu) can shrink, and its label truncates.
• README pre and table get max-width: 100%; overflow-x: auto, so they scroll inside their own box. Tables are display: block so the scroll applies.

Test

• It seeds /alice/fit with a 250-character description word, a 200-character branch, a 116-character file name (120 with .txt), 40 file rows, and a README with a 250-character word, a 300-character code line and a wide table.
• It also renders the empty-repository page with the same description.
• It asserts that:

- neither page has an inline width or min-width; - no shipped rule fixes a width over 390 px; - each of the rules above is present.

The commit carries the Try: line; bun scripts/gate.ts prints nothing.

Left out

• Chromium measurement of the real page width.
• The picker's open panel: its long items aren't constrained.

Try it: bun test test/repo-head-fit.test.ts.

🤖 Generated with Claude Code

Left #9454 open: 1 unticked item remain (A new test/repo-head-fit.test.ts (shape: test/issues-fit.test.ts) seeds a repository with a 250-character unbroken description word, a 200-character branch name, a 120-character file name, 40 file rows and a README holding a 250-character word, a 300-character code line and a wide table. It renders /:owner/:repo and the empty-repository page and asserts no inline width/min-width over 390 px and no rule the page ships fixes a width over 390 px.).