The form, the listing and the flyer read well on a phone held up in a meeting #21

Phone-width CSS and two new tests are pushed. I haven't checked 375 px in a browser. Everything below comes from reading the CSS and markup.

What changed

• static/app.css: a new @media (max-width: 30rem) block, placed after the existing phone block.

- Form: the facts, brand and tone grids drop to one column, so inputs are full width. - Tabs and strip: tabs and strip items no longer shrink, so the tab list and photo strip scroll sideways. Strip images size to min(15rem, 70vw). - Listing header: the tools take full width and the tone form wraps under the address. - Page header: the nav wraps, so the environment pill, commit and sign-in can't push past the screen. - Buttons: asset-action and launch-row buttons are at least --size-tap, which is 44 px.

• src/design.test.ts: two tests.

- One checks the viewport meta is in the layout, which every page uses. It also checks that every <img> in home.ts, listing.ts and email.ts has both width and height. - The other checks the phone rules are present and don't touch print.

Already in place, so I left it alone

• Every image already carries width and height.
• Buttons already had a 44 px minimum height.
• The flyer already scales to the screen with max-width: 8.5in.
• The @media print rules are untouched.

Checked

• bun run lint:design passes, and the new rules use only existing tokens.
• src/design.test.ts and src/walkthrough.test.ts pass (9 tests). I didn't run the other test files.
• bun x tsc --noEmit can't run here: the repo has no tsconfig.json, so bun x fetched a standalone tsc that only printed its help.
• scripts/gate.ts and scripts/fast.ts aren't in this clone.

Not done: no screenshots at 375 px. Please open /, /listings/1 and /listings/1/flyer on the preview at that width.

Closes #11

Phone-width CSS and two new tests are pushed. I haven't checked 375 px in a browser. Everything below comes from reading the CSS and markup.

What changed

• static/app.css: a new @media (max-width: 30rem) block, placed after the existing phone block.

- Form: the facts, brand and tone grids drop to one column, so inputs are full width. - Tabs and strip: tabs and strip items no longer shrink, so the tab list and photo strip scroll sideways. Strip images size to min(15rem, 70vw). - Listing header: the tools take full width and the tone form wraps under the address. - Page header: the nav wraps, so the environment pill, commit and sign-in can't push past the screen. - Buttons: asset-action and launch-row buttons are at least --size-tap, which is 44 px.

• src/design.test.ts: two tests.

- One checks the viewport meta is in the layout, which every page uses. It also checks that every <img> in home.ts, listing.ts and email.ts has both width and height. - The other checks the phone rules are present and don't touch print.

Already in place, so I left it alone

• Every image already carries width and height.
• Buttons already had a 44 px minimum height.
• The flyer already scales to the screen with max-width: 8.5in.
• The @media print rules are untouched.

Checked

• bun run lint:design passes, and the new rules use only existing tokens.
• src/design.test.ts and src/walkthrough.test.ts pass (9 tests). I didn't run the other test files.
• bun x tsc --noEmit can't run here: the repo has no tsconfig.json, so bun x fetched a standalone tsc that only printed its help.
• scripts/gate.ts and scripts/fast.ts aren't in this clone.

Not done: no screenshots at 375 px. Please open /, /listings/1 and /listings/1/flyer on the preview at that width.