The /family page fits a 390 px phone: the fork tree scrolls inside its own box, the page never scrolls sideways #9614

/family now wraps long forge names instead of truncating them with an ellipsis, so the tree stays inside a 390 px phone. A new test/family-fit.test.ts pins it. The Chromium measurement did not run here, so the 390x844 scrollWidth <= innerWidth check has not been run anywhere yet.

What changed

• src/web/pages/family.ts: the page wrapper carries data-family, and the tree list is list setting-list. Rows then wrap their title and meta text instead of truncating with an ellipsis.
• src/web/style/content.ts: [data-family] joins the existing overflow-wrap: anywhere rule that [data-milestone] and the other pages use. No new CSS rule and no shared component rule changed.

Test

• It seeds 30 children with 200-character unbroken names and a 200-character parent host.
• It asserts three things: no inline width/min-width, no shipped rule fixing a width over 390 px, and overflow-wrap: anywhere on [data-family] and .setting-list .row-title.
• Without the src/ fix, 2 of its 3 non-browser tests fail; with it they pass.
• The Chromium case follows the milestones test shape, loads /family at 390x844, and logs family 390x844: {...} for the forge's check to print. It is skipped on this machine because no Chromium starts here.

Checks run: all *-fit tests plus family-heartbeat (116 pass), bun x tsc --noEmit, bun scripts/design-lint.ts and bun scripts/gate.ts. The sandbox blocked the page's lookups of the seeded parent and child hosts; that did not affect the results.

Not done: no preview look added, and the other pages are untouched.

🤖 Generated with Claude Code

Closes #9375

/family now wraps long forge names instead of truncating them with an ellipsis, so the tree stays inside a 390 px phone. A new test/family-fit.test.ts pins it. The Chromium measurement did not run here, so the 390x844 scrollWidth <= innerWidth check has not been run anywhere yet.

What changed

• src/web/pages/family.ts: the page wrapper carries data-family, and the tree list is list setting-list. Rows then wrap their title and meta text instead of truncating with an ellipsis.
• src/web/style/content.ts: [data-family] joins the existing overflow-wrap: anywhere rule that [data-milestone] and the other pages use. No new CSS rule and no shared component rule changed.

Test

• It seeds 30 children with 200-character unbroken names and a 200-character parent host.
• It asserts three things: no inline width/min-width, no shipped rule fixing a width over 390 px, and overflow-wrap: anywhere on [data-family] and .setting-list .row-title.
• Without the src/ fix, 2 of its 3 non-browser tests fail; with it they pass.
• The Chromium case follows the milestones test shape, loads /family at 390x844, and logs family 390x844: {...} for the forge's check to print. It is skipped on this machine because no Chromium starts here.

Checks run: all *-fit tests plus family-heartbeat (116 pass), bun x tsc --noEmit, bun scripts/design-lint.ts and bun scripts/gate.ts. The sandbox blocked the page's lookups of the seeded parent and child hosts; that did not affect the results.

Not done: no preview look added, and the other pages are untouched.

🤖 Generated with Claude Code

The gate failed because none of the pull's commit messages had a Try: line. I added an empty commit with one and pushed it. Nothing in the code changed.

The Try: line says to open /family on the preview at 390 px width. The tree should wrap long forge names, and the page should not scroll sideways. bun scripts/gate.ts printed nothing apart from sandbox network-denial lines, so it appears to pass. I did not re-run the tests, since the code is unchanged. I haven't seen the forge's verdict on this push yet.

What the pull changes

• /family now wraps long forge names instead of truncating them. The tree list is list setting-list, and the page wrapper carries data-family.
• [data-family] joins the existing overflow-wrap: anywhere rule in src/web/style/content.ts.
• test/family-fit.test.ts seeds long names and many rows. It asserts no width over 390 px and that the wrapping rules are present.
• The Chromium measurement at 390x844 is skipped where no Chromium starts, which was the case in my sandbox, so I haven't seen it run.
• Without the src/ change, 2 of the 3 non-browser tests fail.
• No preview look was added.

🤖 Generated with Claude Code

I merged main into this branch and pushed it; the branch should merge cleanly again.

The only conflict was one line in src/web/style/content.ts. This pull added [data-family] to the overflow-wrap: anywhere selector list, and main added [data-explore] to the same list. I kept both, along with main's /explore row-wrapping rules just below it. Nothing else changed.

Checks before the push:

• Passed: tsc --noEmit and design-lint. A targeted run of the four fit tests that touch this CSS (family, explorer, people, web-phone) had 9 pass, 8 skipped and 0 fail. I didn't read the skip reasons.
• Not finished: the broader run from scripts/fast.ts (1,274 test files) timed out in my shell and was moved to the background. I never read its result, so I'm leaving the full check to the forge's run on this push.

Left #9375 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.).