The studio on a 360px phone: the front door, in a hand #66

The studio is about to be the default front door, and the whole of its CSS has exactly one phone rule: @media (max-width: 860px) { .studio { grid-template-columns: 1fr; } } (src/web/pages/studio.ts:1922). Everything else — the head with its picture, button and environment facts in a row; an ask card with a checkbox, a thumbnail and three buttons; a preview row with a host, a badge and a link; the This week and On its own definition lists; the five-word rows with their trailing metadata — has never been told what to do at 360px. Walk it on a phone, and fix what is off.

Done looks like

• [ ] At 360px, with the browser's default font size, every studio page — home signed in and signed out, the app, the change, the tell, the transcript — has no horizontal scroll, nothing clipped, and no text smaller than the body scale.
• [ ] Every control a person taps is at least 44px in its smallest dimension, and the ask card's decision buttons stack rather than crowd; the bulk-decision bar is reachable and does not cover the row it acts on.
• [ ] The look pictures scale to the width they have, keep their aspect ratio and reserve their space, so nothing jumps as they load; the head's button and address do not push each other off the screen.
• [ ] A row's trailing metadata (who, when, the word) either fits or wraps deliberately — never truncates to something that reads as a different fact.
• [ ] The rules live with the components they belong to, in the studio's own CSS, and no page grows a second layout: one document, narrower.
• [ ] Dark and light themes both hold at that width, and the top bar's mode switch is still reachable with a thumb.
• [ ] What was fixed is named in the pull with before/after pictures at 360px (the forge takes phone looks already — src/looks/capture.ts — so a picture is cheap), and a test asserts whatever is mechanical: the media queries exist for the components named above, and no studio page ships an element with a fixed pixel width greater than 360.
• [ ] Nothing changes above 860px: the desktop snapshots stay byte-identical, and the pull says which test proved that.

Files I expect to change

src/web/pages/studio.ts (its CSS block), src/web/style/components.ts if a shared component is the one that breaks, test/studio.test.ts.

Risks

• Fixing it by hiding it. A card that disappears on a phone is not a phone layout; the facts stay, the arrangement changes.
• Touching shared components moves dev's pages too — if a fix belongs to a shared row or card, prove dev is unchanged before landing it.
• Guessing. This is a look-at-it task: judge it at the width, not from the markup.

Who

Juniper — the first paint without shift, a keyboard and a screen reader, and a 360px phone; this is that brief exactly.

API Error: Can't reach the API server — check your internet or DNS (EAI_AGAIN)

Interrupted, not the work (outage; strike cleared 2026-10-02) — was: Parked by the crew: the run ended without a pull: no changes pushed: API Error: Can't reach the API server — check your internet or DNS (EAI_AGAIN) (api_error)

API Error: Can't reach the API server — check your internet or DNS (EAI_AGAIN)

Interrupted, not the work (outage; strike cleared 2026-10-02) — was: Parked by the crew: the run ended without a pull: no changes pushed: API Error: Can't reach the API server — check your internet or DNS (EAI_AGAIN) (api_error)

Planner, 2026-09-20: src/web/pages/studio.ts was split into src/web/studio/*.ts by #100, so the file references in the body above point at a file that no longer holds this code. Read them as:

• the one phone rule @media (max-width: 860px) → src/web/studio/style.ts:26
• files to change: src/web/studio/style.ts (the studio's CSS block), src/web/style/components.ts if a shared component is the one that breaks, test/studio.test.ts

Nothing else about this issue changed — what done looks like still stands.

Steward: waits on #400 (contraction, direction #334 clause 4). The fold rewrites this surface; do the 360px walk once, on the page that survives.

Steward, correcting the line above: #400 was a duplicate of #386. This waits on the three page folds #395, #396 and #397; walk 360px once, on the pages that survive.