fix(builder): fold correctly on OpenStation's phone layer

[juanlentino]

Summary

The builder was unusable on OpenStation's phone layer (data-os-mode="mobile", ≤ 767px). Every item below was reproduced at 375×812 on WordPress 7.1 + OpenStation 1.1.9 before the fix and re-measured after it, and the desktop three-pane layout at 1440px was checked to be unchanged.

Before (measured)	Cause	After
TE…/CH… fragments painted down the canvas's left edge; a 29px inspector box on the right	Rail tracks fold to 0px but the rails keep padding: 14px; overflow: hidden clips at the padding edge	Padding and border fold with the track. The rail rules now sit above the container queries, since equal specificity is decided by order
Every card 377px wide in a 313px list, right edge off-screen	.atfb-canvas__list had an implicit auto column sized to the widest card's min-content; the card preview has no atf-form container ancestor, so form.css never stacked the Name field's two inputs	grid-template-columns: minmax(0, 1fr); the preview is the atf-form container, so a card folds at the width the published form folds
Tabs 405px in a 357px bar, Confirmations clipped	.atfb-tabs is nowrap	Scrolls sideways below 640px (the shell's own phone tab-strip convention)
Toolbar 885px, everything after Export — including Save — unreachable	.atfb-bar__right never wraps	Wraps, secondary buttons icon-only (labels kept off-screen for assistive tech)
Tapping a palette chip adds nothing	A field was only added via the drag manager's onClickOnly; on a phone the shell's dragManager.start() returns null and that callback never exists	The chip's own click adds the field when the manager declined the press. Keyboard activation now works too
No palette at all below 640px	Folded, with nothing to open it	"Add a field" under the canvas opens the palette as a full-width sheet; a tap appends and closes it
240px inspector beside a 117px canvas; no way to put a selection down	Only the canvas's empty space deselected	Inspector takes the whole width with a Done control; fly-over and selection are exclusive

Also: the builder's own inputs are 16px under the mobile stamp, per docs/mobile.md (the card preview is exempt so it still shows the theme's size).

Theme Studio and Analytics already folded correctly and are untouched. Entries stacks list-over-detail on a phone; usable, left for a follow-up.

Tests

tests/vitest/builder-phone.test.ts: the chip tap under a declining drag manager (and no double-add when the manager takes the press), plus the stylesheet's cascade order and the two container facts. Both behavioural assertions were watched failing against the old code. Full suite: 469 passed. tsc --noEmit clean.

Fixes #55.

🤖 Generated with Claude Code

[juanlentino]

Before / after on the phone layer

Shot with Playwright (Chrome, 390×844 @2x, iPhone UA) against WordPress 7.1 + OpenStation 1.1.9, same Contact form, same Playground instance — only the plugin files were swapped between the two rows.

	Canvas	Field selected
Before (main, 1.1.0)
After (this PR)

What to look for, top row → bottom row: the TE/CH palette sliver down the left edge is gone; the cards sit inside the canvas and the Name field's two inputs stack; the tab strip scrolls instead of clipping; the toolbar wraps icon-only so Save is on screen; the inspector takes the whole width with a Done control instead of a 240px column beside a 117px strip of canvas.

And the one state that did not exist before — adding a field on a phone, where the shell refuses every drag:

"Add a field" under the canvas opens the palette as a full-width sheet; a tap on a chip appends the field and closes it.

[AllTerrainDeveloper]

Oh gosh! I never tested it in mobile 😄 That's great! I'll update the plugin with this awesome change ASAP!