[MaxGhenis]

At a 375px viewport, /us/model/behavioral had document.documentElement.scrollWidth 450, so the page scrolled sideways on phones.

Cause and fix (src/components/theory/BehavioralResponses.tsx)

1. The elasticity table set the page width. The table had min-w-[400px] inside an overflow-x-auto wrapper, and a scroll container's min-content width still comes from its contents. On mobile, AppShell's <main> has mx-auto inside a column flexbox and no width, so it sizes to fit its content. It widened to 400 + 2px border + 48px padding = 450px. Even with the overflow contained, a 400px table would hide its "Upper" column at 375 and cut off "Central" at 320. The table's own min-content width is about 250px.
   • Fix: drop min-w-[400px], so all four columns fit at 320 and wider.
   • Guard: keep tw:[contain:inline-size] on the wrapper (the same pattern as Show current TAXSIM comparison results on the validation page #47 and Fix the UK model pages: pipeline, calibration, validation, behavioural responses, and rules #51), so nothing wider can widen <main> again.
2. The concepts cards and budget-constraint chart were always two columns. This never widened the page, but once the page fits 375px a two-column grid would squeeze the chart to 98px (70px at 320). Fix: tw:grid-cols-1 tw:md:grid-cols-2, so they stack below 768px.

Verification

I measured in the built-in browser using same-origin iframes of fixed width, with scrollbar-width: none to match a phone's overlay scrollbars, after a 2.5s settle. For desktop I hashed the geometry (tag plus rounded x/y/width/height) of every element in <main>. Each comparison runs master and this PR on the same kind of server (dev against dev, production against production).

Viewport	master scrollWidth	this PR	Table wrapper visible / content width (PR)	Desktop geometry vs master
320	450	320	270 / 270	(intended change)
375	450	375	325 / 325	(intended change)
768	768	768	718 / 718	identical
1024	1024	1024	718 / 718	identical
1440	1440	1440	1134 / 1134	identical

• /uk/model/behavioral on master renders the same component: 450 → 375 at 375px, identical at 1024 and 1440. The UK behavioural page from Fix the UK model pages: pipeline, calibration, validation, behavioural responses, and rules #51 (UkBehaviouralResponses.tsx) is not touched.
• ?embed=true (the app-v2 iframe): the behavioral section now stacks and its table fits. The US embed page as a whole still measures 674px at 375 on both master and this PR, because of DataPipeline's stage row; Fix the UK model pages: pipeline, calibration, validation, behavioural responses, and rules #51 fixes that.
• The production CSS contains @media (min-width:48rem){.tw\:md\:grid-cols-2{…}}, .tw\:grid-cols-1 and .tw\:\[contain\:inline-size\].
• bun run test: 139/139 pass. On a merge with current master (Use ui-kit logos instead of hotlinked logo URLs #53), 155/155 pass. bun run lint, tsc --noEmit and bun run build exit 0.
• git merge-tree is clean against the open PRs Fix the UK model pages: pipeline, calibration, validation, behavioural responses, and rules #51 and Correct the US overview's program count and behavioral-response claims #54.
• New test src/test/behavioralMobileLayout.test.tsx guards the stacked grid, the table having no fixed min-width, and the contained wrapper. It is class-level, since jsdom can't measure layout. It fails against both master's component and an earlier draft that kept the 400px min-width.
• This repo's PR checks are only Vercel's, so vitest and lint don't run in CI. Adding a workflow for them is queued separately.

Review

Two separate Opus 5.5 reviews looked at this.

First review, four rounds. Round 1 requested changes:

• the 400px min-width still hid the "Upper" column;
• my first diagnosis wrongly said the two-column grid also widened the page.

Both were reproduced and fixed, and rounds 2–4 approved. The later rounds tightened the regression test and collapsed the branch into one commit with an accurate message.

Second review (read-only, no shell). It approved. It also corrected my chart-width wording: on master the chart was 135px on a page that was 450px wide, and 98px is what a two-column grid would give once the page fits. That wording is fixed here and in the commit.

Not in this PR (queued separately)

• Every ?compare=all view overflows at 375px (behavioral 1058, overview 1200, coverage 1200, calibration 893, pipeline 588, validation 706). /data/pipeline and /data/calibration overflow by default. The root cause is the mobile <main> in AppShell, which lacks the w-full the desktop <main> has.
• The budget chart's y-axis repeats labels ($0k, $0k, $1k, $1k, $2k). This predates the PR.

axiom: n/a: layout-only UI change

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
policyengine-model	Ready	Preview	Oct 14, 2026 2:43pm UTC