fix: give the rigid column the extra width so the two end together

[JanWelker]

Option A from the desktop dead-space options, at 7fr 5fr.

Why the obvious fixes don't work

The two columns behave completely differently under width — measured on the live site at 1440 px:

Card	536 px column	680 px column
Form	1887	1831	rigid — a grid of controls
Ingredients	972	972	fully rigid — short table rows
Schedule	2173	1883	elastic — prose reflows

The left column is rigid, the right is elastic. That rules out both instincts:

• Widening the container makes it worse: 72rem → 90rem takes the gap from 718 → 952 px, because only the schedule shrinks.
• Moving Ingredients right just moves the hole: 377 px bottom-right becomes 403 px bottom-left, and worse on longer recipes, since Ingredients grows alongside the Schedule.

What it does

Give the rigid side the extra width and let the elastic one run taller:

	default recipe	12-pizza biga+poolish
1fr 1fr (before)	377 px	718 px
7fr 5fr	68 px	351 px

8fr 5fr measured better still (−59 / 130) but puts a 412 px schedule beside a 660 px form, inverting the visual hierarchy for a gain only the largest recipes show. 7fr 5fr leaves the schedule at 447 px, which reads comfortably — the timeline works at 390 px on a phone.

Two things the narrower column shook loose

1. The axe sweep started reporting the verbosity toggle as "partially obscured (15px by 24px)". That was my spec's fault, not the app's: it forced every <details> open, including the actions menu, which is absolutely positioned and is meant to cover what is beneath it. It now opens content sections only and leaves popovers closed — the arrangement a reader is actually in. Verified afterwards that the gate still catches a contrast regression inside those sections (16 nodes, all four states).

2. The fit-score panel stopped closing on Escape, about one run in four. Its handlers were gated on a bound copy of open, but <details> flips its own attribute on click and Svelte syncs the binding afterwards — so for a window the panel was visibly open while the handler still read false. The element's own open is the source of truth now, which removes the timing question rather than racing it.

16 consecutive passes, against 1-in-4 failures before. Worth noting I first chased this with synthetic KeyboardEvents and got misleading results; real key presses through Playwright are what the fix is verified against.

Scope note

This treats the symptom. The form being ~1850 px tall regardless of recipe or width is the imbalance, and shortening it to ~1200 px would bring both columns within ~30 px on its own — the same lever as the mobile-height item still open.

Tests

One added in e2e/layout.spec.ts (baseline 74 -> 75), pinning the ratio and that the columns now end within 200 px. Fails on equal columns with Received: 1.

Verified locally: lint, check, 881 unit at 100 % coverage, 75 browser, test:baseline.

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-09-05 06:43 UTC

[JanWelker]

Closing unmerged: the 7fr 5fr split does not look right in the preview. Taking option B instead — shortening the form, which is the actual cause of the imbalance rather than a counterweight to it.

The two fixes found while building this are unrelated to the grid and will follow in their own PR: the axe sweep forcing popovers open, and the fit-score Escape race (1 run in 4, currently on main).