Explain display setup in Settings, stop iOS form zoom, lock the page behind the drawer
CI / verify (pull_request) Successful in 1m12s
CI / infrastructure-smoke (pull_request) Successful in 49s
CI / package-release (pull_request) Successful in 47s
CI / migration-smoke (pull_request) Successful in 2m18s
CI / image-build (pull_request) Successful in 1m3s
CI / deploy-smoke (same-origin) (pull_request) Successful in 49s
CI / package-publication (pull_request) Successful in 54s
CI / deploy-smoke (split) (pull_request) Successful in 3m38s

A second real-iPhone review of the Stage 1 Dashboard found three
defects. This fixes them, and ADR 0065 records the decisions.

- Settings -> Displays now sets up a screen in one place. A "Set up a
  new screen" panel shows the platform display page to open on the
  screen, a Copy link button, and Add display directly beneath it; the
  step-by-step version is folded into a <details>. The addresses come
  from a new GET /api/v1/devices/setup, which requires
  core.devices.manage and lists each running display module's
  /display/<module-id> page. Nothing names Signage. With no display
  module installed, the panel says so and offers no Add display.
- iOS Safari zoomed into the pairing field because the shared
  .ek-control rendered at 14px. On phones and touch screens it now
  renders at max(1rem, 16px). The viewport is untouched, so zoom stays
  available, and a test guards that. The shared focus trap now returns
  focus with preventScroll, so closing a dialog no longer moves the page
  under the phone header.
- While the phone drawer is open, the page behind it no longer scrolls.
  The root's overflow is hidden, a non-passive touchmove listener
  cancels drags outside the drawer's list and overscroll past its ends,
  and root overscroll is turned off. The list itself still scrolls.
  Closing restores the exact scroll position unless another page opened.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
ekklesia
2026-10-15 22:56:22 -05:00
co-authored by Claude Opus 5.5
parent 5f9b536bc6
commit 906c015ca8
20 changed files with 1072 additions and 35 deletions
+53 -6
View File
@@ -600,16 +600,34 @@ check(
),
"the sidebar is navigation only, and arriving at Displays focuses no field",
);
await evaluate(`${selector("add-display")}.click()`);
// ADR 0065: how to set up a new screen, in one place — the platform display page of every module
// that uses displays, on the API origin where the display host lives, with Add display right under
// it; or a plain note, and no Add display, when no installed module uses displays.
check(
await waitFor(
`${selector("add-display-dialog")} && document.activeElement === ${selector("device-pairing-code-input")}`,
"the Add display dialog with its code field focused",
`${selector("display-setup")} && !${selector("display-setup-failed")} && (${selector("display-setup-none")} || (${selector("display-setup")}.contains(${selector("add-display")}) && [...document.querySelectorAll('[data-testid="display-setup-url"]')].every((element) => element.textContent.startsWith(${JSON.stringify(`${apiOrigin}/display/`)}))))`,
"the display setup steps",
),
"Add display opens a dialog that focuses the pairing code only once asked",
"Settings → Displays explains how to set up a new screen, from the platform's own display page",
);
await evaluate(`${selector("add-display-cancel")}.click()`);
await waitFor(`!${selector("add-display-dialog")}`, "the Add display dialog closing");
const displayModuleInstalled = !(await evaluate(`Boolean(${selector("display-setup-none")})`));
if (displayModuleInstalled) {
await evaluate(`${selector("add-display")}.click()`);
check(
await waitFor(
`${selector("add-display-dialog")} && document.activeElement === ${selector("device-pairing-code-input")}`,
"the Add display dialog with its code field focused",
),
"Add display opens a dialog that focuses the pairing code only once asked",
);
await evaluate(`${selector("add-display-cancel")}.click()`);
await waitFor(`!${selector("add-display-dialog")}`, "the Add display dialog closing");
} else {
check(
!(await evaluate(`Boolean(${selector("add-display")})`)),
"with no module that uses displays, Settings → Displays offers no Add display that could only fail",
);
}
await navigate(`${dashboardOrigin}/settings/discover`);
check(
await waitFor(
@@ -652,11 +670,19 @@ check(
),
"the phone header keeps the menu in reach after scrolling, with no horizontal overflow",
);
const scrolledTo = await evaluate("scrollY");
await evaluate(`${selector("mobile-navigation-trigger")}.click()`);
await waitFor(
`${selector("navigation-drawer")}?.querySelector('[data-testid="select-settings-system"]')`,
"Settings in the phone drawer",
);
// ADR 0065: the page behind the open drawer is locked where it was, and only the drawer scrolls.
check(
await evaluate(
`getComputedStyle(document.documentElement).overflowY === "hidden" && getComputedStyle(document.documentElement).overscrollBehaviorY === "none" && scrollY === ${Number(scrolledTo)}`,
),
"opening the phone drawer locks the page behind it in place",
);
await evaluate(`${selector("select-settings-system")}.click()`);
check(
await waitFor(
@@ -665,6 +691,27 @@ check(
),
"the phone drawer offers the same Settings hierarchy and closes once a page is chosen",
);
check(
await evaluate(
`getComputedStyle(document.documentElement).overflowY !== "hidden" && document.documentElement.style.getPropertyValue("overscroll-behavior") === ""`,
),
"choosing a page from the drawer releases the page lock",
);
// ADR 0065: on a phone the pairing code is typed at 16px or more, so iOS Safari does not zoom.
if (displayModuleInstalled) {
await navigate(`${dashboardOrigin}/settings/displays`);
await waitFor(selector("add-display"), "Settings → Displays on a phone");
await evaluate(`${selector("add-display")}.click()`);
check(
await waitFor(
`${selector("device-pairing-code-input")} && parseFloat(getComputedStyle(${selector("device-pairing-code-input")}).fontSize) >= 16`,
"the pairing code field's size on a phone",
),
"the pairing code field is at least 16px on a phone, so iOS does not zoom into it",
);
await evaluate(`${selector("add-display-cancel")}.click()`);
await waitFor(`!${selector("add-display-dialog")}`, "the Add display dialog closing on a phone");
}
await send("Emulation.setDeviceMetricsOverride", {
deviceScaleFactor: 1,
height: 1080,