Settings › Crew fits a 390 px phone: no sideways scroll, each agent's row and its actions wrap #9615

Settings › Crew now wraps on a 390 px phone. The Chromium case didn't run here, so the sideways-scroll measurement is still unconfirmed.

/settings/crew redirects to /settings#crew, so the page under test is /alice/fit/settings. Its Crew card was the only part that didn't fit: its list lacked the setting-list class, so a long agent name or brief was cut off at the row edge or pushed the page wider.

What changed

• src/web/studio/crew.ts: the Crew card's list is now <ul class="list setting-list">, the same wrapping rows the Team card uses. #crew also carries data-crew-settings. I dropped the now-unused listCard import.
• src/web/style/content.ts: one rule scoped to [data-crew-settings] sets overflow-wrap: anywhere; min-width: 0. No shared rule changed.
• test/crew-settings-fit.test.ts seeds 12 agents on the crew: one with a 39-character name, three with a 250-character unbroken word in the brief, and the rest with long briefs. It asserts:

- the page renders the seeded content; - no inline width or fixed width over 390 px; - the crew list wraps and the container wraps anywhere.

• It also has a Chromium case at 390x844 that asserts scrollWidth <= innerWidth.

Checks

• With the source changes stashed, crew-settings-fit.test.ts fails, so it would catch a regression. With them, its 3 non-Chromium cases pass.
• The Chromium case is skipped in this sandbox because no Chromium starts, so it printed nothing here. The forge's check will run it and log the scrollWidth and viewportWidth it measures.
• bun x tsc --noEmit, bun scripts/design-lint.ts and bun scripts/gate.ts pass. All *-fit tests and the other tests that touch the crew card pass (149 pass, 0 fail). I did not run the full suite.

Left out

• The Team card, which already wraps.
• Any change to shared row rules.
• Any new preview look.

Closes #9373

Settings › Crew now wraps on a 390 px phone. The Chromium case didn't run here, so the sideways-scroll measurement is still unconfirmed.

/settings/crew redirects to /settings#crew, so the page under test is /alice/fit/settings. Its Crew card was the only part that didn't fit: its list lacked the setting-list class, so a long agent name or brief was cut off at the row edge or pushed the page wider.

What changed

• src/web/studio/crew.ts: the Crew card's list is now <ul class="list setting-list">, the same wrapping rows the Team card uses. #crew also carries data-crew-settings. I dropped the now-unused listCard import.
• src/web/style/content.ts: one rule scoped to [data-crew-settings] sets overflow-wrap: anywhere; min-width: 0. No shared rule changed.
• test/crew-settings-fit.test.ts seeds 12 agents on the crew: one with a 39-character name, three with a 250-character unbroken word in the brief, and the rest with long briefs. It asserts:

- the page renders the seeded content; - no inline width or fixed width over 390 px; - the crew list wraps and the container wraps anywhere.

• It also has a Chromium case at 390x844 that asserts scrollWidth <= innerWidth.

Checks

• With the source changes stashed, crew-settings-fit.test.ts fails, so it would catch a regression. With them, its 3 non-Chromium cases pass.
• The Chromium case is skipped in this sandbox because no Chromium starts, so it printed nothing here. The forge's check will run it and log the scrollWidth and viewportWidth it measures.
• bun x tsc --noEmit, bun scripts/design-lint.ts and bun scripts/gate.ts pass. All *-fit tests and the other tests that touch the crew card pass (149 pass, 0 fail). I did not run the full suite.

Left out

• The Team card, which already wraps.
• Any change to shared row rules.
• Any new preview look.

Settings › Crew now wraps on a 390 px phone, and the push should clear the gate rule that failed the check.

The failure was a missing "Try:" line in the commit messages. I added a new empty commit carrying one: "Try: open /alice/fit/settings#crew on the preview at 390 px and check the Crew list wraps with no sideways scroll". I pushed it as a plain push, not a force push. bun scripts/gate.ts printed nothing locally. I haven't seen the forge's re-run yet.

What changed

• src/web/studio/crew.ts: the Crew card's list is now <ul class="list setting-list">, the same wrapping rows the Team card uses. A long agent name or brief now breaks instead of widening the page. #crew also carries data-crew-settings.
• src/web/style/content.ts: one rule scoped to [data-crew-settings] sets overflow-wrap: anywhere; min-width: 0. No shared rule changed.
• test/crew-settings-fit.test.ts seeds 12 agents, including a 39-character name and three briefs with a 250-character unbroken word. It checks that:

- the seeded content renders; - no width over 390 px is fixed; - the crew list wraps and its container wraps anywhere. It also has a Chromium case at 390x844 that asserts scrollWidth <= innerWidth.

Checks

• With the source changes stashed, the test fails; with them, its 3 non-Chromium cases pass.
• The Chromium case is skipped in this sandbox because no Chromium starts here, so the sideways-scroll measurement is unconfirmed until the forge's check runs it and logs the numbers.
• bun x tsc --noEmit and bun scripts/design-lint.ts pass. The other *-fit tests and the tests that touch the crew card pass (149 pass, 0 fail). I did not run the full suite.

Left out

• The Team card, which already wraps.
• Any change to shared row rules.
• Any new preview look.

Try: open /alice/fit/settings#crew on the preview at 390 px. The Crew list should wrap with no sideways scroll.

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