fix(frontend,website): make the wizard and docs site usable on a phone

[Mandyx22]

What

The wizard had no width-based breakpoints at all. Its fixed 210px step rail left roughly 165px of usable content on a 375px screen, which made the tool effectively unusable on a phone. This adds a phone layout to the wizard and closes the remaining mobile gaps on the docs site.

The main change

Below 700px the step rail becomes a horizontal top bar — the same nodes and connector rotated a quarter turn, each label under its node. Progress stays visible at every step; nothing moves behind a hamburger.

The connector reuses the vertical rule's existing trick. Going down it was height: calc(100% + gap) to reach the next node; across, equal-width columns with gap: 0 make left: 50%; width: 100% land on exactly the same spot.

Wizard (packages/frontend)

File	Change
Sidebar.module.css	Side rail → horizontal top stepper; footer flattens to one row; dialog capped at min(320px, 100vw - 2rem)
AppShell.module.css	Shell stacks; content full-width with min-height: 0 so it scrolls rather than pushing the shell taller; bottom padding clears the Preview pill
index.css	Form controls pinned to 16px on small screens — iOS Safari auto-zooms on any focused control below that, and every field was ~14px, so tapping one zoomed in and left the page scrolled sideways
PreviewDrawer.module.css	420px → full width; the --sidebar-w allowance is meaningless once the rail is gone
Landing.module.css	Cards stack (2×260px needed 544px); scrolls from the top instead of centering and clipping on a short screen
Variables.module.css	1fr 140px → one column; long column names wrap instead of forcing the row wide
Authors.module.css	Paired fields unstack
DataUpload.module.css	Picker/action rows wrap; file and status lists capped at 40vh
ProjectInfo.module.css	Conflict rows go label-above-value; upload row wraps
Review.module.css	CLI blocks scroll instead of stretching the page; buttons full width
JsonViewer.module.css	Indent 1.5rem → 0.9rem per level; nesting previously ate a 375px screen within a few levels

Site (website)

• wizard.module.css — dvh alongside vh (mobile URL bars count toward 100vh, so the frame hung below the fold), and on phones the frame takes the full height below the navbar. The old - 4.5rem assumed a single-row footer; it wraps to three rows on a phone, so subtracting it still left the frame overhanging.
• index.module.css — hero type was still 2.4rem at phone width; trimmed gutters, stacked the card CTAs.
• Footer/styles.module.css — wrapped items were scattering under space-between; now centered.
• contact.module.css — dvh + tighter padding.

Testing

• tsc -b clean; lint 0 errors (10 pre-existing warnings, all react-refresh / exhaustive-deps)
• 269/269 frontend tests pass
• npm run build succeeds for both the wizard bundle and the Docusaurus site; all 11 media queries confirmed present in the shipped CSS
• Checked by hand on a phone against the dev server

No behavior or markup changed — this is CSS only, all of it additive inside @media (max-width: …) blocks, so desktop rendering is untouched.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4d3a56c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
frontend	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[jodeleeuw]

Pushed a0242dc with fixes for the review findings, plus one item left deliberately undone.

Fixed

• .previewPill override never applied. The media block sat above the base .previewPill rule; same specificity, so source order decided and the base won — the pill stayed at 1.5rem on phones. The override now sits after the rule it overrides. The .shell/.content overrides in that block were fine (their base rules precede it) and stayed put. Verified by parsing the file with postcss: the 1rem declaration is now last.
• 16px !important narrowed to input:not([type="checkbox"]):not([type="radio"]), select, textarea. Checkboxes and radios can't be zoomed into, so they were never part of the iOS problem.
• max-height: 40vh → 40dvh (with the vh line kept as fallback), matching the dvh reasoning this branch applies to the site's viewport heights. Comment now says what the rule is for, since at portrait heights it lands close to the desktop cap and only does visible work in landscape.
• --w-narrow comment reference dropped — no such token exists anywhere in the repo.

tsc -b clean, 269/269 tests pass, lint 0 errors (same 10 pre-existing warnings). The Vite build can't run in my checkout — postcss is missing from node_modules, the same pre-existing breakage noted in #146 — so the CSS was verified by parsing it with postcss directly rather than through a bundle.

Left alone: the conflict with #146

Both PRs are MERGEABLE against main individually, but not with each other. git merge-tree on the two heads conflicts at the tail of Review.module.css: this branch appends after .cliAltSummary:hover, #146 deletes that block.

Beyond the textual conflict, #146 removes .cliBlock, .cliAlt, and .cliAltSummary along with the CLI <details> element, so this branch's

.cliBlock { overflow-x: auto; }

would target a class that no longer exists. .downloadBtn, .saveJsonBtn, .validateBtn, and .validatorNote all survive #146, so the rest of that block is unaffected.

I didn't touch it, because the right action depends on merge order and that's yours to pick. If #146 lands first, rebase this branch and drop the .cliBlock rule. If this one lands first, the rule is correct as written and #146 removes it. Either way, don't resolve the conflict by keeping both sides — that silently restores the styles #146 deliberately deleted.

Not addressed: the step labels at 0.68rem (~10.9px) are small for a PR about phone usability, especially next to the care taken over the 16px input rule. Left as your call, since bumping it changes how the stepper looks.

[jodeleeuw]

#146 is merged (ffe5647), so I've rebased this branch onto it and resolved the conflict — force-pushed as 4d3a56c.

The conflict resolution. .cliAlt / .cliAltSummary / .cliAltSummary:hover stay deleted, per #146. The phone block is kept, minus its .cliBlock rule — the CLI <details> element that rule existed for is gone, so the rule had nothing left to match. .downloadBtn, .saveJsonBtn, .validateBtn, and .validatorNote all survived #146 and are unchanged.

Mandy's authorship is preserved on 2019ce6; only my follow-up fixes sit on top.

Checked the rest of the branch for the same problem. Rather than assume .cliBlock was the only casualty, I parsed all 15 CSS files this PR touches and looked for any class targeted inside a new @media block but never defined at base level in the same stylesheet. No orphans anywhere — Review.module.css was the only overlap between the two PRs.

tsc -b clean, 269/269 tests, lint 0 errors (same 10 pre-existing warnings). CI is running on the rebased head.

Still not addressed, and still your call: the 0.68rem (~10.9px) step labels in the horizontal stepper.