The /explore page fits a 390 px phone: no sideways scroll, long app and forge names wrap #9612

/explore now wraps long app and forge names and long descriptions instead of cutting them off with an ellipsis. The Chromium-measured cases did not run here because no Chromium starts in my sandbox, so there is no printed width to report; the forge's check will run them. tsc, scripts/gate.ts, scripts/design-lint.ts and the explore*, *-fit and design-lint tests pass locally.

What changed

• src/web/studio/explore.ts: the page body sits in a <div data-explore>.
• src/web/style/content.ts:

- [data-explore] is added to the existing overflow-wrap: anywhere rule. - Inside it, .row-title and .row-meta use white-space: normal; overflow: visible. - The row can wrap its "Make it yours" button, and .row-main takes flex: 1 1 14rem. - All of it is scoped to [data-explore], so no shared rule changed.

• The issue's src/web/pages/explorer.ts is the code-browser file tree, not /explore. The page is src/web/studio/explore.ts, so I changed that one.
• New test/explorer-fit.test.ts seeds 25 public apps. They include a 60-character app name and three descriptions made of a 250-character unbroken word. It renders /explore, /explore?q=kind:person and an empty-result page whose query contains the 250-character word.

- Static checks: no inline or shipped width/min-width over 390 px, and the [data-explore] wrap rule is present. These fail without the fix because there is no data-explore and no rule. - Chromium cases: one per path at 390x844, asserting nothing overflows and scrollWidth <= innerWidth. They are skipped where no Chromium runs.

Not done: I did not seed forges or people with long display names, because repo names are length-limited and I left the rest unseeded. I did not run the other *-fit tests under Chromium.

Try it: bun test test/explorer-fit.test.ts, or open /explore on a 390 px viewport.

🤖 Generated with Claude Code

Closes #9370

/explore now wraps long app and forge names and long descriptions instead of cutting them off with an ellipsis. The Chromium-measured cases did not run here because no Chromium starts in my sandbox, so there is no printed width to report; the forge's check will run them. tsc, scripts/gate.ts, scripts/design-lint.ts and the explore*, *-fit and design-lint tests pass locally.

What changed

• src/web/studio/explore.ts: the page body sits in a <div data-explore>.
• src/web/style/content.ts:

- [data-explore] is added to the existing overflow-wrap: anywhere rule. - Inside it, .row-title and .row-meta use white-space: normal; overflow: visible. - The row can wrap its "Make it yours" button, and .row-main takes flex: 1 1 14rem. - All of it is scoped to [data-explore], so no shared rule changed.

• The issue's src/web/pages/explorer.ts is the code-browser file tree, not /explore. The page is src/web/studio/explore.ts, so I changed that one.
• New test/explorer-fit.test.ts seeds 25 public apps. They include a 60-character app name and three descriptions made of a 250-character unbroken word. It renders /explore, /explore?q=kind:person and an empty-result page whose query contains the 250-character word.

- Static checks: no inline or shipped width/min-width over 390 px, and the [data-explore] wrap rule is present. These fail without the fix because there is no data-explore and no rule. - Chromium cases: one per path at 390x844, asserting nothing overflows and scrollWidth <= innerWidth. They are skipped where no Chromium runs.

Not done: I did not seed forges or people with long display names, because repo names are length-limited and I left the rest unseeded. I did not run the other *-fit tests under Chromium.

Try it: bun test test/explorer-fit.test.ts, or open /explore on a 390 px viewport.

🤖 Generated with Claude Code

/explore now wraps long app and forge names and long descriptions instead of cutting them off, and the page no longer scrolls sideways at 390 px.

The gate failed because no commit had a "Try:" line. I added an empty commit with one and pushed it. scripts/gate.ts printed nothing locally after that. I didn't re-run the tests, because this commit changes no files; the code and tests are unchanged from the pull as first pushed. The Chromium-measured cases are skipped in my sandbox, so no width was measured here.

What changed:

• Page: src/web/studio/explore.ts wraps the page in <div data-explore>.
• Rules: src/web/style/content.ts adds [data-explore] to the existing overflow-wrap: anywhere rule. Rows inside it wrap instead of truncating. The rules are scoped to the page, so no shared component changed.
• Test: new test/explorer-fit.test.ts seeds 25 public apps, including a 60-character app name and three descriptions that are a 250-character unbroken word. It renders three /explore pages.

- Static cases: no inline or shipped width over 390 px, and the wrap rule is present. These fail without the fix. - Chromium cases: each of the three pages must have scrollWidth <= innerWidth at 390x844. They are skipped where Chromium doesn't start, so the forge's check will print the numbers.

Not done: I didn't seed forges or people with long display names, and I didn't run the other *-fit tests under Chromium.

Try: open /explore on the preview at a 390 px width.

🤖 Generated with Claude Code

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