Explain display setup in Settings, stop iOS form zoom, lock the page behind the drawer

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]>

surfaces/shell/tests/settings-navigation.test.tsx

@@ -156,6 +156,13 @@ async function render(
     // The existing data the Settings overview reads (ADR 0064); a 403 for anyone it would refuse.
     const visible = options.settings ?? ADMINISTRATOR;
     const sections = visible === "fails" ? ADMINISTRATOR.sections : visible.sections;
+    if (url.endsWith("/api/v1/devices/setup")) {
+      return sections.includes("displays")
+        ? Response.json({
+            displays: [{ moduleId: "signage", name: "Signage", url: "/display/signage" }],
+          })
+        : Response.json({ code: "AUTHORIZATION_DENIED" }, { status: 403 });
+    }
     if (url.endsWith("/api/v1/devices")) {
       return sections.includes("displays")
         ? Response.json({ devices: options.devices ?? DEVICES })
@@ -721,3 +728,56 @@ describe("the phone header (ADR 0064)", () => {
     expect(document.activeElement).toBe(required("host-main-region"));
   });
 });
+
+describe("the phone drawer locks the page behind it (ADR 0065)", () => {
+  const rootOverflow = () => document.documentElement.style.getPropertyValue("overflow");
+  const rootOverscroll = () =>
+    document.documentElement.style.getPropertyValue("overscroll-behavior");
+
+  it("stops the page scrolling while open, and releases it on Escape", async () => {
+    await render("/settings", { compact: true });
+    expect(rootOverflow()).toBe("");
+
+    await click(required("mobile-navigation-trigger"));
+    expect(rootOverflow()).toBe("hidden");
+    expect(rootOverscroll()).toBe("none");
+    expect(document.body.style.getPropertyValue("overflow")).toBe("hidden");
+    // The drawer's own list is the one region that still scrolls.
+    expect(required("navigation-drawer").contains(required("navigation-drawer-scroll"))).toBe(true);
+
+    await act(async () => {
+      required("navigation-drawer").dispatchEvent(
+        new KeyboardEvent("keydown", { bubbles: true, key: "Escape" }),
+      );
+    });
+    expect(query("navigation-drawer")).toBeNull();
+    expect(rootOverflow()).toBe("");
+    expect(rootOverscroll()).toBe("");
+    expect(document.activeElement).toBe(required("mobile-navigation-trigger"));
+  });
+
+  it("cancels a drag on the page behind it, and releases it when a page is chosen", async () => {
+    await render("/settings", { compact: true });
+    await click(required("mobile-navigation-trigger"));
+
+    const drag = new Event("touchmove", { bubbles: true, cancelable: true });
+    Object.defineProperty(drag, "touches", { value: [{ clientY: 300 }] });
+    required("host-main-region").dispatchEvent(drag);
+    expect(drag.defaultPrevented).toBe(true);
+
+    await click(required("select-settings-displays"));
+    expect(query("navigation-drawer")).toBeNull();
+    expect(rootOverflow()).toBe("");
+    const after = new Event("touchmove", { bubbles: true, cancelable: true });
+    Object.defineProperty(after, "touches", { value: [{ clientY: 300 }] });
+    required("host-main-region").dispatchEvent(after);
+    expect(after.defaultPrevented).toBe(false);
+  });
+
+  it("never locks anything on a wide screen", async () => {
+    await render("/settings");
+    expect(query("mobile-navigation-trigger")).toBeNull();
+    expect(rootOverflow()).toBe("");
+    expect(document.body.style.getPropertyValue("overflow")).toBe("");
+  });
+});