From c252119cdbc48792503f1694666df7df3e0fac0d Mon Sep 17 00:00:00 2001
From: "codexbot.disnetdev.com (did:plc:hbonvqr5ysrscg5wdyb5klie)"
 <codexbot.disnetdev.com@noreply.radial>
Date: Fri, 31 Jul 2026 18:08:29 +0000
Subject: [PATCH] Improve mobile rail and touch inputs

Co-Authored-By: codexbot.disnetdev.com (did:plc:hbonvqr5ysrscg5wdyb5klie) <codexbot.disnetdev.com@noreply.radial>
---
 DESIGN.md                                     |  5 ++--
 packages/ui/src/app.css                       | 11 +++++++--
 packages/ui/src/lib/components/PaneBar.svelte |  8 ++++++-
 packages/ui/src/lib/components/Rail.svelte    |  2 +-
 packages/ui/src/lib/keys.test.ts              | 14 +++++++++++
 packages/ui/src/lib/keys.ts                   |  4 ++++
 packages/ui/src/routes/+layout.svelte         | 24 ++++++++++++++++++-
 7 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 437be60..1f2d0ed 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -300,9 +300,10 @@ margins, so a hover fill bleeds past the text without moving it. Section heads t
 below.
 
 **Responsive.** At **860px** the rail becomes an overlay drawer over a full-bleed pane (a hamburger in the
-bar, a scrim behind, a 300ms slide) at its own fixed width with no grip — a drawer over the pane is not a
+bar, an interactive dismiss scrim behind, a 300ms slide) at its own fixed width with no grip — a drawer over the pane is not a
 column beside it, so there is no edge between two things to drag — `?frame` gives up, and gutters tighten
-to 16px. At **560px** the
+to 16px. On touch-primary devices, typed controls have a 16px font-size floor so focusing them does not
+trigger Safari's viewport zoom. At **560px** the
 sheet sheds what it can afford to lose, in a fixed order: a unit row's summary, the breadcrumb's tail, the
 fixture chip, an actor's disc on a goal row, the second badge in a tail, and every badge's long form for
 its short one. A System row is the exception — its title is the record's identity, so the summary stays
diff --git a/packages/ui/src/app.css b/packages/ui/src/app.css
index d57beab..8b65170 100644
--- a/packages/ui/src/app.css
+++ b/packages/ui/src/app.css
@@ -1105,6 +1105,7 @@ select.sl { resize: none; cursor: pointer; padding-right: 8px; }
 .toast[hidden] { display: block; opacity: 0; transform: translateX(-50%) translateY(10px); }
 
 .railtoggle { display: none; }
+.rail-scrim { display: none; }
 
 /* ─── responsive ─────────────────────────────────────────────────────────── */
 @media (max-width: 860px) {
@@ -1125,8 +1126,8 @@ select.sl { resize: none; cursor: pointer; padding-right: 8px; }
      the rail takes its own width here and the grip goes away rather than resizing an overlay. */
   .rail-resize { display: none; }
   .app.rail-open .rail { transform: none; }
-  .app.rail-open::after {
-    content: ""; position: absolute; inset: 0; z-index: 29;
+  .rail-scrim {
+    display: block; position: absolute; inset: 0; z-index: 29; border: 0; padding: 0;
     background: oklch(0.2 0.03 262 / 0.28);
   }
   .railtoggle { display: grid; }
@@ -1140,6 +1141,12 @@ select.sl { resize: none; cursor: pointer; padding-right: 8px; }
   .plus { right: 18px; bottom: 18px; }
   .menu { right: 18px; bottom: 74px; width: min(306px, calc(100vw - 36px)); }
 }
+
+/* iOS Safari zooms the page when a focused control is under 16px. On a touch-primary
+   device every typed control meets that floor; nothing else changes. */
+@media (hover: none) and (pointer: coarse) {
+  textarea.ta, input.ti, select.sl, .find input, .field input { font-size: 16px; }
+}
 @media (max-width: 560px) {
   .row .sub { display: none; }
   .crumb .full { display: none; }
diff --git a/packages/ui/src/lib/components/PaneBar.svelte b/packages/ui/src/lib/components/PaneBar.svelte
index 4f37d82..469b7c2 100644
--- a/packages/ui/src/lib/components/PaneBar.svelte
+++ b/packages/ui/src/lib/components/PaneBar.svelte
@@ -31,7 +31,13 @@
 </script>
 
 <div class="pane-bar">
-  <button class="icon-btn railtoggle" aria-label="Show lists" onclick={() => (ui.railOpen = !ui.railOpen)}>
+  <button
+    class="icon-btn railtoggle"
+    aria-label="Show lists"
+    aria-expanded={ui.railOpen}
+    aria-controls="rail"
+    onclick={() => (ui.railOpen = !ui.railOpen)}
+  >
     <svg width="17" height="17" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
       <path d="M3 6h14M3 10h14M3 14h14" />
     </svg>
diff --git a/packages/ui/src/lib/components/Rail.svelte b/packages/ui/src/lib/components/Rail.svelte
index e03379a..9661541 100644
--- a/packages/ui/src/lib/components/Rail.svelte
+++ b/packages/ui/src/lib/components/Rail.svelte
@@ -88,7 +88,7 @@
     (page.url.pathname === href.split('?')[0] ? 'page' : undefined)
 </script>
 
-<nav class="rail" aria-label="Lists, projects and goals">
+<nav class="rail" id="rail" tabindex="-1" aria-label="Lists, projects and goals">
   <!-- The space's name is also the way out of it: a tab looks at one space at a time, and switching
        is picking a different URI (there is no account to switch under). -->
   <button class="rail-top" type="button" onclick={() => (session.picking = true)} title="Switch space">
diff --git a/packages/ui/src/lib/keys.test.ts b/packages/ui/src/lib/keys.test.ts
index 0f1b713..bc410ef 100644
--- a/packages/ui/src/lib/keys.test.ts
+++ b/packages/ui/src/lib/keys.test.ts
@@ -33,6 +33,7 @@ beforeEach(() => {
   ui.accountOpen = false
   ui.menuOpen = false
   ui.helpOpen = false
+  ui.railOpen = false
   session.picking = false
   // `n` writes a goal into the space that is open, so the table asks whether there is one. The
   // fixture is the cheapest honest answer — the same one every other test here draws from.
@@ -279,6 +280,7 @@ describe('Escape', () => {
     openDraft({ kind: 'goal', project: 'at://did:plc:alice/com.disnetdev.radial.project/p' })
     ui.menuOpen = true
     ui.accountOpen = true
+    ui.railOpen = true
     session.picking = true
     ui.helpOpen = true
 
@@ -288,6 +290,10 @@ describe('Escape', () => {
 
     onKeydown(press('Escape').event)
     expect(session.picking).toBe(false)
+    expect(ui.railOpen).toBe(true)
+
+    onKeydown(press('Escape').event)
+    expect(ui.railOpen).toBe(false)
     expect(ui.accountOpen).toBe(true)
 
     onKeydown(press('Escape').event)
@@ -306,6 +312,14 @@ describe('Escape', () => {
     expect(ui.query).toBe('')
   })
 
+  it('closes the rail without disturbing a draft underneath it', () => {
+    openDraft({ kind: 'goal' })
+    ui.railOpen = true
+    onKeydown(press('Escape').event)
+    expect(ui.railOpen).toBe(false)
+    expect(compose.draft).toBeDefined()
+  })
+
   it('is not swallowed when there is nothing open', () => {
     const { event, preventDefault } = press('Escape')
     onKeydown(event)
diff --git a/packages/ui/src/lib/keys.ts b/packages/ui/src/lib/keys.ts
index dfe6077..bfd612e 100644
--- a/packages/ui/src/lib/keys.ts
+++ b/packages/ui/src/lib/keys.ts
@@ -156,6 +156,10 @@ function dismiss(): boolean {
     session.picking = false
     return true
   }
+  if (ui.railOpen) {
+    ui.railOpen = false
+    return true
+  }
   if (ui.accountOpen) {
     ui.accountOpen = false
     return true
diff --git a/packages/ui/src/routes/+layout.svelte b/packages/ui/src/routes/+layout.svelte
index bd319f5..7940a00 100644
--- a/packages/ui/src/routes/+layout.svelte
+++ b/packages/ui/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
   import { page } from '$app/state'
   import { initAuth } from '$lib/auth.svelte.js'
   import { closeDraft, compose } from '$lib/compose.svelte.js'
-  import { keepFocus } from '$lib/focus.js'
+  import { focusStranded, keepFocus } from '$lib/focus.js'
   import { watchJoin } from '$lib/join.svelte.js'
   import { onKeydown, registerHere } from '$lib/keys.js'
   import { pageTitle, unitPreview } from '$lib/meta.js'
@@ -79,6 +79,7 @@
     void page.params.project
     closeDraft()
     closeMenu()
+    ui.railOpen = false
   })
 
   // Quick find belongs to the view it was typed in, and so does its filter. Carried to the next page
@@ -109,6 +110,24 @@
     back?.()
     back = undefined
   })
+
+  // The narrow rail is a drawer: opening it moves keyboard and screen-reader focus into the lists,
+  // and every way of closing it returns focus to the hamburger that opened it. Wide layouts never
+  // set `railOpen`, but keep the media guard so a resize cannot make a static rail steal focus.
+  let railBack: ((stranded?: boolean) => boolean) | undefined
+  $effect(() => {
+    if (ui.railOpen && matchMedia('(max-width: 860px)').matches) {
+      railBack ??= keepFocus()
+      const timer = setTimeout(() => document.getElementById('rail')?.focus(), 0)
+      return () => clearTimeout(timer)
+    }
+    const railElement = document.getElementById('rail')
+    const scrim = document.querySelector('.rail-scrim')
+    const stranded = focusStranded(railElement) || document.activeElement === scrim
+    if (railBack && stranded) railBack(true)
+    railBack = undefined
+    return undefined
+  })
   const spaceName = $derived(space?.index.space.value.name ?? '')
 
   const crumb = $derived.by<Crumb[]>(() => {
@@ -246,6 +265,9 @@
 
 {#if space}
   <div class="app" class:rail-open={ui.railOpen} class:resizing={rail.resizing}>
+    {#if ui.railOpen}
+      <button class="rail-scrim" aria-label="Hide lists" onclick={() => (ui.railOpen = false)}></button>
+    {/if}
     <Rail {space} />
     <!-- Named because the rail's grip is a `separator` that has to say what it separates: its
          `aria-controls` points here. The solo shell below has no rail, so no second `#pane`. -->
-- 
2.51.2