rbrooks/Quest-Board
Watch
1
0
Fork
You've already forked Quest-Board
 0
Code Issues 58 Pull requests 7 Projects Releases 76 Packages Wiki Activity Actions

fix(frontend): a dialog's rows keep their own height on an iPhone (#1110) #1111

Merged
claude-bot merged 1 commit from fix/phone-reveal-dialog into main 2026-10-05 21:06:29 +00:00
Conversation 0 Commits 1 Files changed 4 +65
claude-bot commented 2026-10-05 20:33:21 +00:00
Collaborator
Copy link

Refs #1110 (item 2, the owner's screenshot of "Show … to the table" on an iPhone running Orion).

Cause

No rule of ours gives the dialog a height. WebKit up to Safari 18 lays out a modal <dialog> that is a grid against the tallest it may be (the UA max-height) before it resolves the UA height: fit-content. With .modal[open] { display: grid } and the default align-content: normal, the auto rows share that height out, and fit-content then keeps the stretched result. Nested grids and the flex row of buttons stretch inside their rows: gaps under every line, a tall fieldset, buttons twice their height.

Reproduced in WebKit 17.0, 17.4 and 18.4 (Playwright 1.38, 1.45, 1.52): dialog 704 px of a 740 px viewport, buttons 88 to 92 px. Not reproducible in WebKit 26.6 (the pinned Playwright 1.63) or Chromium, which is why two earlier attempts saw nothing.

Fix

align-content: start on .modal[open]. Where a dialog is already as tall as its content this changes nothing: Chromium and WebKit 26.6 measure identically before and after. In WebKit 18.4 the dialog goes from 704 to 512.5 px and its buttons from 92 to 44 px.

Tests

  • j4-run-the-table.spec.js: rowsKeepTheirHeight gives the open dialog 160 px of spare height and asserts no row or button grew. It fails on the unfixed build (buttons 44 to 84) and passes on the fixed one in all three projects (21 passed, 3 existing skips).
  • Modal.test.jsx: reads the rule from Modal.css.
  • Run before this PR: eslint (0 errors), vitest run src/ui/Modal (8 passed), the J4 journey. Not run locally: the full vitest suite and the other journeys; CI runs them.

What CI cannot see

Every CI project is Chromium, so CI guards the rule, not the WebKit behaviour. A webkit project at the pinned version would not have caught this either (26.6 is unaffected). Not checked: the stickyFoot dialogs and the /design stills in old WebKit; the owner's Orion itself.

🤖 Generated with Claude Code

Refs #1110 (item 2, the owner's screenshot of "Show … to the table" on an iPhone running Orion). ## Cause No rule of ours gives the dialog a height. WebKit up to Safari 18 lays out a modal `<dialog>` that is a grid against the tallest it may be (the UA `max-height`) before it resolves the UA `height: fit-content`. With `.modal[open] { display: grid }` and the default `align-content: normal`, the auto rows share that height out, and `fit-content` then keeps the stretched result. Nested grids and the flex row of buttons stretch inside their rows: gaps under every line, a tall fieldset, buttons twice their height. Reproduced in WebKit 17.0, 17.4 and 18.4 (Playwright 1.38, 1.45, 1.52): dialog 704 px of a 740 px viewport, buttons 88 to 92 px. Not reproducible in WebKit 26.6 (the pinned Playwright 1.63) or Chromium, which is why two earlier attempts saw nothing. ## Fix `align-content: start` on `.modal[open]`. Where a dialog is already as tall as its content this changes nothing: Chromium and WebKit 26.6 measure identically before and after. In WebKit 18.4 the dialog goes from 704 to 512.5 px and its buttons from 92 to 44 px. ## Tests - `j4-run-the-table.spec.js`: `rowsKeepTheirHeight` gives the open dialog 160 px of spare height and asserts no row or button grew. It fails on the unfixed build (buttons 44 to 84) and passes on the fixed one in all three projects (21 passed, 3 existing skips). - `Modal.test.jsx`: reads the rule from `Modal.css`. - Run before this PR: eslint (0 errors), `vitest run src/ui/Modal` (8 passed), the J4 journey. Not run locally: the full vitest suite and the other journeys; CI runs them. ## What CI cannot see Every CI project is Chromium, so CI guards the rule, not the WebKit behaviour. A webkit project at the pinned version would not have caught this either (26.6 is unaffected). Not checked: the `stickyFoot` dialogs and the `/design` stills in old WebKit; the owner's Orion itself. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
fix(frontend): a dialog's rows keep their own height on an iPhone (#1110)
All checks were successful
CI / Does this change touch the recording path? (pull_request) Successful in 25s
Details
CI / Synthetic session harness (no GPU, no LLM) (pull_request) Has been skipped
Details
CI / Backend lint (ruff) (pull_request) Successful in 37s
Details
CI / Docker image build (pull_request) Successful in 45s
Details
CI / Bot/backend version sync (pull_request) Successful in 46s
Details
CI / Feedback site tests (pull_request) Successful in 47s
Details
CI / Summarisation accuracy eval harness (stub provider) (pull_request) Successful in 1m4s
Details
CI / Bot tests and audit (pull_request) Successful in 2m4s
Details
CI / Frontend (shard 2/2) (pull_request) Successful in 9m16s
Details
CI / Frontend (shard 1/2) (pull_request) Successful in 10m47s
Details
CI / End-to-end journeys (phone) (pull_request) Successful in 12m10s
Details
CI / End-to-end journeys (desktop) (pull_request) Successful in 12m53s
Details
CI / End-to-end journeys (keyboard) (pull_request) Successful in 13m3s
Details
CI / Backend migration, tests, and audit (pull_request) Successful in 32m44s
Details
120d1f3302 
On an iPhone, "Show <card> to the table" came up filling the screen: a gap
under every row, the "Show it on" box twice its height, Cancel and Show it
twice theirs.

WebKit up to Safari 18 lays out a modal <dialog> that is a grid against the
tallest it may be (the browser's own max-height, the viewport less 36px)
before it resolves `height: fit-content`. With `align-content: normal` the
auto rows stretched to fill that height, and fit-content then took the
stretched result as the content's height. Reproduced in Playwright's WebKit
18.4, 17.4 and 17.0 (704px tall in a 740px viewport, 92px buttons); WebKit
26 and Chromium do not do it, which is why the phone project never saw it.

`.modal[open]` now packs its rows at the start. Where the dialog is as tall
as its content, which is everywhere else, that changes nothing.

The table journey gives the open dialog 160px of spare height and checks no
row or button grew, which fails on the old rule in Chromium. A vitest reads
the rule.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
claude-bot deleted branch fix/phone-reveal-dialog 2026-10-05 21:06:29 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
backend
Issue related to the backend

  
bot
Issue related to the bot

  
bug
Something is not working

  
duplicate
This issue or pull request already exists

  
enhancement
New feature

  
frontend
Issue related to the frontend

  
help wanted
Need some help

  
invalid
Something is wrong

  
question
More information is needed

  
recording
Issue related to the recording system

  
security
Security hardening / vulnerability work

  
wontfix
This won't be fixed

No labels
backend
bot
bug
duplicate
enhancement
frontend
help wanted
invalid
question
recording
security
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
rbrooks/Quest-Board!1111
No description provided.