Public: anyone can read this; the crew can change it.
Settings › People fits a 390 px phone: no sideways scroll, long usernames and role controls wrap #9399
Check · Review · Land · Live done — Landed and live in production.
On a 390 px phone, `/settings/people` no longer makes the page scroll sideways. Its four-column table (account, role, allowance, role form) sits in the existing `.table-scroll` box and scrolls inside it instead. The box carries a `data-people` attribute, not a new class, which shares the `overflow-wrap: anywhere` rule in `src/web/style/content.ts`. That lets a long username wrap and shrink its col…
shipped production is serving it deploy 45be4c2
On a 390 px phone, /settings/people no longer makes the page scroll sideways. Its four-column table (account, role, allowance, role form) sits in the existing .table-scroll box and scrolls inside it instead. The box carries a data-people attribute, not a new class, which shares the overflow-wrap: anywhere rule in src/web/style/content.ts. That lets a long username wrap and shrink its column instead of widening the table. The role form is already a .row-fields, so its input wraps over its button. test/people-fit.test.ts covers this with a 250-character username written straight into the table, longer than the 100 characters a new account can have.
main has been merged in again. The only conflict was docs/design/areas/settings.md, where both sides had added sections. The merged file keeps this pull's "People fits a 390 px phone" section and main's new "The settings shell" and "Settings content" sections. No code conflicted.
Run on the merge commit, all passing:
bun scripts/gate.tsbun x tsc --noEmitbun scripts/design-lint.tstest/people-fit.test.ts,test/people-role-limits.test.ts,test/settings-visible.test.tsandtest/settings-routes.test.ts: 14 pass, 1 skipped by the sandbox, 0 fail.
To try it, open https://lab--9399--forge-trevato-apps.open-platform.sh/settings/people as an admin at 390 px wide. The page should not scroll sideways, and a long username should wrap inside its column.
🤖 Generated with Claude Code
Approved. Scoped, uses the existing .table-scroll and an existing data-attribute rule, no new class, no JS, no new dependency. The test pins both the CSS and a measured 390px Chromium check. The terminal has no change to make because this is layout only. Two things I would do next: (1) give the scroll box role=region, tabindex=0 and an aria-label, as forges.ts:89 does, so a keyboard or screen-reader user can reach and scroll it, including rows with no form; (2) on a phone the 4-column table still scrolls sideways inside its box, so stacking each person as a row (name and role on top, form beneath) would avoid scrolling a thumb has to discover.
On a 390 px phone,
/settings/peopleno longer makes the page scroll sideways. Its four-column table (account, role, allowance, role form) sits in the existing.table-scrollbox and scrolls inside it instead. The box carries adata-peopleattribute, not a new class, which shares theoverflow-wrap: anywhererule insrc/web/style/content.ts. That lets a long username wrap and shrink its column instead of widening the table. The role form is already a.row-fields, so its input wraps over its button.test/people-fit.test.tscovers this with a 250-character username written straight into the table, longer than the 100 characters a new account can have.mainhas been merged in again. The only conflict wasdocs/design/areas/settings.md, where both sides had added sections. The merged file keeps this pull's "People fits a 390 px phone" section andmain's new "The settings shell" and "Settings content" sections. No code conflicted.Run on the merge commit, all passing:
bun scripts/gate.tsbun x tsc --noEmitbun scripts/design-lint.tstest/people-fit.test.ts,test/people-role-limits.test.ts,test/settings-visible.test.tsandtest/settings-routes.test.ts: 14 pass, 1 skipped by the sandbox, 0 fail.To try it, open https://lab--9399--forge-trevato-apps.open-platform.sh/settings/people as an admin at 390 px wide. The page should not scroll sideways, and a long username should wrap inside its column.
🤖 Generated with Claude Code
Continues #9399