fix(ui): keep formula editor within the viewport on small screens - #256

What

The formula editor overflows the viewport on phones. formula-editor.tsx gave the card a flat minWidth: 600, and the editor opens in a flyout anchored to a property header, so at a 375px viewport the card was 600px wide and the page scrolled sideways.

Changes

Card width — minWidth: 600 → width: min(600px, calc(100vw - 32px)). Still 600px on a wide screen, never wider than the viewport minus 16px gutters.

Two more minWidth: 500 floors — property-detail.tsx and function-detail.tsx carried the same kind of fixed floor and would have overflowed on their own; they now use the same min(500px, calc(100vw - 32px)).

Single-column grids at 375px — both grids drop to one column:

@media (max-width: 375px) {
  .formula-properties__grid,
  .formula-functions__grid {
    grid-template-columns: 1fr;
  }
}

Two details were needed to make that actually work:

• The properties grid's grid-template-columns was an inline style, and inline styles beat any stylesheet rule, so a media query alone would have had no effect. The template moved into formula-bar.scss as .formula-properties__grid.
• The media query sits last in the file on purpose. It has the same specificity as the two base rules, so only source order makes it win.
• Both card item groups now set minWidth: 0. The shared card primitive pins min-width: max-content, which refuses to shrink below content width and would have kept the panels wide inside a viewport-bound card.

How it was tested

Measured in headless Chromium against the compiled card.scss + formula-bar.scss, so the shipped rules (including the new media query) are what's being measured. Headless Chrome clamps --window-size to 500 CSS px, so each width was driven through an iframe sized to exactly that viewport — 100vw and media queries resolve against the iframe's own initial containing block.

At 375px both grids report a single 323px column with each item on its own row; at 480px+ they reflow to multiple columns. The card is pinned at exactly 600px from 632px viewport width upward.

Project checks, all passing locally, using CI's own commands:

npx tsc --noEmit -p tsconfig.app.json                          → exit 0
node scripts/check-i18n.mjs                                    → ✔ Translations OK
npx eslint --no-warn-ignored <5 changed files, CI's filter>    → exit 0
npm run build                                                  → ✓ built in 20.51s

CI

The workflow run on this PR is sitting at action_required with 0 jobs — that's GitHub's approval gate for workflows from fork pull requests, not a failure. Every previous pull_request run in this repo that succeeded came from Sall25/folio itself; the fork PRs never ran. Approving the run needs admin rights on the repository, which I don't have, so CI stays pending until someone with admin clicks approve. The commands above are exactly what CI runs, so they should pass once it does.

Not tested

I could not click through the real UI: the editor lives behind a signed-in session with a Supabase .env.local, and the landing-page editor doesn't render the database property config. The measurements above are against the real compiled CSS in a real engine, but not against live React render output. Worth a quick look on a phone to confirm the flyout also positions correctly now that it's narrower — Radix collision handling should shift it, but that's the one thing static layout can't show.

Closes #200