fix: the Controls rail keeps its frame buttons while the canvas is locked, and the phone's text fields no longer zoom the page (v0.21.4)

[MerciHanrim]

Part of #338 and #340. Released together as v0.21.4 (the release date is set to the actual merge day in Seoul before merging): two small, independent fixes in one patch release, each with its own issue for tracking and verification.

#338 — the Controls rail under the lock

The bug

While the canvas is edit-locked, two buttons disappeared from the Controls rail instead of staying disabled: "Group frame" (the draw-a-frame tool) always, and "Clear all frames" in a document with frames. The rail is anchored at the bottom, so it grew shorter and every button above them moved down by a 26 px button height. Measured on main at 70a9c37 in light, dark and forced colours: 12 to 10 buttons with saved frames (rail top 531 to 583 px, height 314 to 262 px), 10 to 9 without. This has been the case since v0.12.0 (#243); it is not a v0.21.3 regression: #334 made the other editing controls disabled while locked but did not cover these two.

A frame tool armed before locking also stayed armed: a drag on the empty canvas started a frame draft the stores refused, and drag-to-pan stayed off.

The change

• Both buttons stay in the rail while locked, as native disabled buttons (src/components/Canvas.tsx), left out of the Tab order like every control fix(canvas): a new document starts unlocked, and the edit lock blocks every user edit (v0.21.3) #334 disables. In the same document the rail has the same buttons, the same 26 px button height and the same overall height locked and unlocked. The stores already refused a frame drawn or cleared while locked (fix(canvas): a new document starts unlocked, and the edit lock blocks every user edit (v0.21.3) #334), so nothing else changes.
• Locking turns an armed frame tool off, however the lock comes on (src/store/editPolicy.ts).
• A disabled rail button takes the disabled text colour, GrayText in forced colours, and no hover fill (src/index.css), like the fix(canvas): a new document starts unlocked, and the edit lock blocks every user edit (v0.21.3) #334 chips.
• Unchanged: the buttons that appear only when they apply ("Clear all frames" with no frame, "Suggest frames", "Clear suggested frames").

Measured on this branch, light, dark and forced colours: 12 to 12 buttons with saved frames and 10 to 10 without; the rail's top, height and bottom and every button's place and height identical locked and unlocked.

Tests

• e2e/canvas-lock.spec.ts, three new tests: the rail's buttons, each button's height and the rail's top and height are identical locked and unlocked, with and without a frame, in light, dark and forced colours, and a disabled button's colour differs from an enabled one's; while locked both buttons are disabled, Tab skips them and clicking them changes nothing, and unlocked they work again; arming the tool and then locking turns it off, and a drag on the empty canvas then pans and draws no frame. All three fail on main.
• src/store/editPolicy.test.ts: locking disarms the tool; unlocking does not arm it again.
• e2e/large-graph-readability.spec.ts "under the edit-lock and on mobile a saved frame is view + select only": its two assertions that the buttons are absent while locked now expect them disabled (same title).

#340 — the phone's language search zoomed the page in

The bug

On an iPhone, tapping the language search in the phone's ⋯ sheet zoomed the page in, and after the search and the menu closed the page stayed zoomed until it was pinched back. iOS Safari zooms in on a focused text field smaller than 16 px and does not zoom back out. Measured on production (v0.21.3) in a phone layout: the search field computed to 12 px (font: inherit from its menu); on the desktop it is 16 px. docs/mobile.md §MV4b had fixed this for the Monte-Carlo fields alone, as "the only place a mobile user focuses a field", and #300 for the share password field alone; the language search came later.

The change

• Under the mobile media query, every text-like field (input of any type but checkbox, radio, range, file, colour, button, submit, reset and hidden, textarea, select) takes font-size: max(16px, 1em) (src/index.css), so a field added later cannot bring the zoom back and one already larger keeps its size.
• Zoom itself is never blocked: the viewport meta keeps no maximum-scale and no user-scalable=no, and nothing forces the page scale back.
• The desktop is unchanged (the rule sits only in the phone media query).

Tests

• e2e/mobile.spec.ts, one new test in the phone project: every visible text field is at least 16 px on the canvas, in the More sheet, in the language menu, in the share panel and in the Monte-Carlo dialog; the language search stays on screen, filters as typed and gives up focus when the menu closes. It fails without the rule.
• On a real iPhone, on this pull request's preview at 703f00d, checked by Hanrim, in Safari and in the Home Screen app installed from the preview: search, type, choose a language, close the menu; and search, type, cancel, close the menu. In all four runs the search field stayed visible above the keyboard, and after the menu closed the page was back at its original scale with no pinch needed. Passed.

Visual baselines

4 of the 76 PNGs change, by approval; the other 72 are byte-identical to main.

• Every screenshot of the visual specs (both projects) was captured on the same machine without and with fix(canvas): the Controls rail keeps its frame buttons, disabled, while the canvas is locked (v0.21.4) #338 and compared on every channel. 8 differ: the gacha and Early MMO Template views, light and dark, only in the rail column (x 15 – 43), because both Templates open locked and the disabled frame button(s) now show there; and 4 that differ just as much between two renders of main itself (ko-desktop-app, ko-long-label-and-tip, frames-activity, state-inspector-light), which are kept.
• Replaced: flow-colour-views-visual flow-views-template-gacha-light and -dark (on main they rendered exactly as committed; the fix adds the disabled "Group frame" and "Clear all frames"), and flow-views-template-mmo-light and -dark (the fix adds the disabled "Group frame"). The two MMO baselines also carried the earlier drift that v0.21.3 deliberately kept (about 800 px at the dot nodes, and the lock button's pre-v0.21.3 drawing); replacing them takes that drift in too, since the fix's change and the old drift together no longer fit the tolerance.
• fix(mobile): focusing the language search no longer zooms the page in on iPhone (v0.21.4) #340 changes no baseline: the phone project's 15 screenshots, captured twice without and twice with the rule, differ only where two runs without it already differ (1 – 3 px of a playback cue).

Release

• Version 0.21.4, .changes/rail-frame-buttons-locked.json (one declaration per change, for the whole release), release note release:0.21.4 with four lines in 18 languages, 16 without native review. The keyboard line says "the keyboard", not the Tab key's name, and the phone line says "a phone", not the iPhone, so no guard has to declare an English word.
• Copy guards move only their exact pins: catalog 1040 to 1044, runtime 1262 to 1266. Every new line reads the same in pt-BR and pt-PT, so pt-PT's difference stays at 277; es-419 reads as es-ES; no ru line carries ё. No bound is widened.
• Docs: docs/canvas-edit-lock.md (where the lock is enforced, and its tests), docs/mobile.md §MV4b (every phone text field), CHANGELOG.md, README.md.

Verification (local, at the head commit)

• npx tsc -b, oxlint (39 warnings, the existing baseline, 0 errors), 3,271 unit tests, all 21 source checks of the CI checks job, and the web, portable and PWA builds with their closure and notice checks; git diff --check.
• End to end in Chrome, without retries, chromium and mobile: every spec without a screenshot at 2 workers, 1,680 passed, 2 skipped by design; every screenshot spec at 1 worker, twice in a row, 331 passed and 5 skipped both times; the portable file 16 of 16, the production bundle 16 of 16, the PWA 19 of 19.
• Baselines: 4 changed, the other 72 byte-identical to main, none added or removed.
• The list: 2,034 tests (main's 2,030 and the 4 added, none removed); each chromium and mobile test in exactly one of the 5 shards.

Not claimed

• No screen-reader check; the accessibility claims are the automated state, focus and keyboard checks above.

[cloudflare-workers-and-pages]

Deploying cozy-loop-studio with    Cloudflare Pages

Latest commit:	703f00d
Status:	✅  Deploy successful!
Preview URL:	https://45c86fc0.cozy-loop-studio.pages.dev
Branch Preview URL:	https://fix-rail-frame-buttons-locke.cozy-loop-studio.pages.dev

View logs