diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43ac60c6..e730a4e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,7 +23,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   The form list loads faster when a team has many forms. It now needs the same few database queries for one form or a hundred. Before, every form added 3 queries. (#256)
 -   On screens narrower than 1280 px, a form's editor bar now sits in two rows under the app header: the form with Dashboard and Preview, then Editor, Settings, Integrations and Submissions as tabs. Nothing in it scrolls sideways any more, and the header keeps the logo and your team name. On every screen, keyboard focus in the editor bar and the account menu now shows a blue ring. (#257)
 -   A form's pages have one top bar instead of two: the form's name with its menu, a Draft or Live label, the pages, Preview, Publish and your account. Publish first checks for questions without text, rules that point to a deleted question and a missing privacy link. Once the form is live, Share has its link, Open form and Unpublish. On a phone the pages sit in a tab bar at the bottom. (#265)
--   The form editor shows your whole form as one column. Each question shows its number, answer type, text, and if it is required, has rules or is hidden. The question you work on opens right there, also on a phone, where you couldn't edit questions before. Hiding a question, random order and custom answers are now under the question's Settings. (#268)
+-   The form editor shows your whole form as one column. Each question shows its number, answer type, text, and if it is required, has rules or is hidden. The question you work on opens right there, also on a phone, where you couldn't edit questions before. Hiding a question, random order and custom answers are now under the question's Settings. An outline next to the form jumps to any question, and on a phone a question's Settings open from the bottom of the screen. (#268, #272)
 -   Deleting a question, a group, an answer choice, a consent policy or a logic rule in the form editor now asks first in the app's own dialog. It names the question, how many answers will be deleted with it, and the questions whose rules will stop working. A choice nobody picked, or a policy nobody agreed to, is still deleted at once. (#269)
 
 ### Fixed
diff --git a/resources/css/_touch-fields.css b/resources/css/_touch-fields.css
new file mode 100644
index 00000000..360e2527
--- /dev/null
+++ b/resources/css/_touch-fields.css
@@ -0,0 +1,33 @@
+/* The form editor's question card below lg: every field 44 px tall with
+   16 px text (iOS zooms into a focused field under 16 px), and a 44 px tap
+   area on switches and checkboxes. One rule here instead of a class on
+   every D9 field in the Configure* parts. */
+@media (max-width: 1023px) {
+    .touch-fields
+        :is(
+            input:not([type="checkbox"], [type="radio"]),
+            textarea,
+            button[aria-haspopup="listbox"]
+        ) {
+        min-height: 2.75rem;
+        font-size: 1rem;
+    }
+
+    .touch-fields [role="option"] {
+        padding-block: 0.625rem;
+    }
+
+    /* D9Switch is relative and 24 px tall */
+    .touch-fields [role="switch"]::before {
+        content: "";
+        position: absolute;
+        inset: -10px 0;
+    }
+
+    /* D9Checkbox: its label covers the whole 20 px row, stretched to 44 px */
+    .touch-fields input[type="checkbox"] + div > label::before {
+        content: "";
+        position: absolute;
+        inset: -12px 0;
+    }
+}
diff --git a/resources/css/app.css b/resources/css/app.css
index b2e81f72..4cb71eee 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -12,6 +12,7 @@
 @import "./_tooltip.css";
 @import "./_typography.css";
 @import "./_tiptap.css";
+@import "./_touch-fields.css";
 
 @import "tailwindcss/utilities";
 
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index c8e59193..fe52d00f 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -4,7 +4,9 @@
 
     <jet-banner />
 
-    <div class="flex min-h-screen flex-col bg-grey-50">
+    <div
+      class="flex min-h-screen flex-col bg-grey-50 supports-[height:100dvh]:min-h-dvh"
+    >
       <FormTopBar v-if="form.formId">
         <template #save-status><slot name="save-status" /></template>
         <template #preview><slot name="preview" /></template>
diff --git a/resources/js/components/Factory/Document/BlockMenu.vue b/resources/js/components/Factory/Document/BlockMenu.vue
index 6c351edb..6bfb93ec 100644
--- a/resources/js/components/Factory/Document/BlockMenu.vue
+++ b/resources/js/components/Factory/Document/BlockMenu.vue
@@ -6,7 +6,7 @@
   >
     <template #button>
       <span
-        class="grid h-9 w-9 place-items-center rounded-md border border-grey-300 bg-white text-grey-700 hover:bg-grey-100"
+        class="grid h-11 w-11 place-items-center rounded-md border border-grey-300 lg:h-9 lg:w-9 bg-white text-grey-700 hover:bg-grey-100"
       >
         <D9Icon name="ellipsis-h" />
         <span class="sr-only">{{ label }}</span>
@@ -67,7 +67,7 @@ const store = useForm();
 const workbench = useWorkbench();
 const { addBlock } = useAddBlock();
 
-const item = "w-full text-left text-sm";
+const item = "w-full min-h-11 text-left text-sm lg:min-h-0";
 const isGroup = computed(() => props.block.type === "group");
 
 // the open block saves through the workbench: a store save swaps its object, and its next save would send the old value
diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index d6462098..715801ff 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -1,16 +1,17 @@
 <template>
   <section
+    :id="`row-${group.uuid}`"
     :aria-labelledby="`${id}-label`"
-    class="rounded-lg border border-grey-200 bg-grey-50 py-2 pr-2"
+    class="scroll-mt-4 rounded-lg border border-grey-200 bg-grey-50 py-2 pr-2"
     :class="isOpen && 'ring-1 ring-blue-500'"
   >
     <div
-      class="group/header flex flex-wrap items-center gap-x-2 gap-y-1 pb-2 pl-1"
+      class="group/header flex flex-wrap items-center gap-x-2 gap-y-1 pb-2 pl-3 sm:pl-1"
     >
       <span
         aria-hidden="true"
         title="Drag to reorder"
-        class="document-grip grid h-6 w-6 cursor-grab place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-grey-900 lg:opacity-0 lg:group-focus-within/header:opacity-100 lg:group-hover/header:opacity-100"
+        class="document-grip hidden h-6 w-6 cursor-grab place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-grey-900 sm:grid lg:opacity-0 lg:group-focus-within/header:opacity-100 lg:group-hover/header:opacity-100"
       >
         <D9Icon name="grip-vertical" />
       </span>
@@ -24,12 +25,12 @@
         type="text"
         placeholder="Group"
         title="Use a group to show or hide several questions with one rule."
-        class="h-9 min-w-0 flex-1 rounded-md border-0 bg-transparent px-2 text-sm font-semibold text-grey-700 placeholder:text-grey-600 hover:bg-grey-100 focus:bg-white focus:ring-2 focus:ring-blue-500"
+        class="h-11 min-w-0 flex-1 rounded-md border-0 bg-transparent px-2 text-base font-semibold lg:h-9 lg:text-sm text-grey-700 placeholder:text-grey-600 hover:bg-grey-100 focus:bg-white focus:ring-2 focus:ring-blue-500"
       />
       <span v-if="group.is_disabled" class="text-xs text-grey-600">Hidden</span>
       <button
         type="button"
-        class="flex h-9 items-center rounded-md px-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+        class="flex h-11 items-center rounded-md px-2 text-sm font-semibold text-blue-700 lg:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
         @click="logic.showLogicEditor(group)"
       >
         Rules<span v-if="group.logics?.length" class="tabular-nums"
diff --git a/resources/js/components/Factory/Document/DocumentOutline.test.ts b/resources/js/components/Factory/Document/DocumentOutline.test.ts
new file mode 100644
index 00000000..20a8cf47
--- /dev/null
+++ b/resources/js/components/Factory/Document/DocumentOutline.test.ts
@@ -0,0 +1,44 @@
+import { mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it } from "vitest";
+import { useForm, useWorkbench } from "@/stores";
+import DocumentOutline from "./DocumentOutline.vue";
+
+const blocks = [
+    { id: 1, uuid: "q1", type: "none", message: "<p>Welcome</p>" },
+    { id: 2, uuid: "g1", type: "group", title: "Food" },
+    { id: 3, uuid: "q2", type: "radio", message: "", parent_block: "g1" },
+    { id: 4, uuid: "q3", type: "input-short", message: "<p>Name?</p>" },
+] as FormBlockModel[];
+
+const numbers = { q1: 1, q2: 2, q3: 3 };
+
+describe("the outline", () => {
+    beforeEach(() => {
+        useForm().$reset();
+        useWorkbench().$reset();
+        useForm().blocks = blocks;
+    });
+
+    it("lists questions in document order under their group, never by id", () => {
+        const wrapper = mount(DocumentOutline, { props: { numbers } });
+        const lines = wrapper.findAll("li").map((li) => li.text());
+
+        expect(lines).toEqual([
+            "1Welcome",
+            "Food",
+            "2No question text yet",
+            "3Name?",
+        ]);
+    });
+
+    it("marks the open question and says which one was picked", async () => {
+        useWorkbench().block = blocks[3];
+        const wrapper = mount(DocumentOutline, { props: { numbers } });
+        const current = wrapper.find("[aria-current=true]");
+
+        expect(current.text()).toBe("3Name?");
+
+        await wrapper.findAll("button")[0].trigger("click");
+        expect(wrapper.emitted("pick")?.[0]).toEqual([blocks[0]]);
+    });
+});
diff --git a/resources/js/components/Factory/Document/DocumentOutline.vue b/resources/js/components/Factory/Document/DocumentOutline.vue
new file mode 100644
index 00000000..693fa1bf
--- /dev/null
+++ b/resources/js/components/Factory/Document/DocumentOutline.vue
@@ -0,0 +1,78 @@
+<template>
+  <nav :aria-labelledby="`${id}-title`" class="px-2 py-3">
+    <div class="flex h-11 items-center justify-between pl-2 lg:h-8">
+      <h2 :id="`${id}-title`" class="text-xs font-semibold text-grey-600">
+        Outline
+      </h2>
+      <slot name="close" />
+    </div>
+    <ul class="mt-1 flex flex-col gap-px">
+      <li v-for="item in items" :key="item.block.uuid">
+        <div
+          v-if="item.block.type === 'group'"
+          class="mt-1.5 flex h-7 items-center gap-1.5 px-2 text-xs font-semibold text-grey-700"
+        >
+          <D9Icon name="layer-group" aria-hidden="true" />
+          <span class="truncate">{{ item.block.title || "Group" }}</span>
+        </div>
+        <button
+          v-else
+          type="button"
+          class="flex h-11 w-full items-center gap-2 rounded-md pr-2 lg:h-8 text-left text-[13px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          :class="[
+            item.inGroup ? 'pl-5' : 'pl-2',
+            isCurrent(item.block)
+              ? 'bg-blue-50 font-medium text-blue-700 hover:bg-blue-100'
+              : 'text-grey-800 hover:bg-grey-100',
+          ]"
+          :aria-current="isCurrent(item.block) ? 'true' : undefined"
+          @click="emit('pick', item.block)"
+        >
+          <span
+            class="w-5 shrink-0 text-right tabular-nums"
+            :class="isCurrent(item.block) ? 'text-blue-700' : 'text-grey-600'"
+            >{{ numbers[item.block.uuid] }}</span
+          >
+          <span dir="auto" class="truncate">{{
+            plainText(item.block.message) || "No question text yet"
+          }}</span>
+        </button>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from "vue";
+import { D9Icon } from "@deck9/ui";
+import { useForm, useWorkbench } from "@/stores";
+import { plainText } from "./questionSummary";
+
+defineProps<{
+  numbers: Record<string, number>;
+}>();
+const emit = defineEmits<{ pick: [block: FormBlockModel] }>();
+
+const store = useForm();
+const workbench = useWorkbench();
+const id = useId();
+
+// the document's order: each group, then its questions
+const items = computed(() => {
+  const blocks = store.blocks ?? [];
+
+  return blocks
+    .filter((block) => !block.parent_block)
+    .flatMap((block) => [
+      { block, inGroup: false },
+      ...(block.type === "group"
+        ? blocks
+            .filter((child) => child.parent_block === block.uuid)
+            .map((child) => ({ block: child, inGroup: true }))
+        : []),
+    ]);
+});
+
+const isCurrent = (block: FormBlockModel) =>
+  workbench.block?.uuid === block.uuid;
+</script>
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 37f8d992..70333659 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -1,6 +1,9 @@
 <template>
-  <div :id="`row-${block.uuid}`" class="group/question flex items-start">
-    <div class="flex w-12 shrink-0 flex-col items-end gap-1 pr-2 pt-3">
+  <div
+    :id="`row-${block.uuid}`"
+    class="group/question flex scroll-mt-4 items-start"
+  >
+    <div class="flex w-8 shrink-0 flex-col sm:w-12 items-end gap-1 pr-2 pt-3">
       <span
         aria-hidden="true"
         class="flex h-6 items-center text-[13px] tabular-nums text-grey-600"
@@ -9,7 +12,7 @@
       <span
         aria-hidden="true"
         title="Drag to reorder"
-        class="document-grip grid h-6 w-6 cursor-grab place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-grey-900 lg:opacity-0 lg:group-focus-within/question:opacity-100 lg:group-hover/question:opacity-100"
+        class="document-grip hidden h-6 w-6 cursor-grab sm:grid place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-grey-900 lg:opacity-0 lg:group-focus-within/question:opacity-100 lg:group-hover/question:opacity-100"
       >
         <D9Icon name="grip-vertical" />
       </span>
diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
new file mode 100644
index 00000000..072f8a9f
--- /dev/null
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -0,0 +1,66 @@
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm, useWorkbench } from "@/stores";
+import FormDocument from "./FormDocument.vue";
+
+const blocks = [
+    { id: 1, uuid: "b1", type: "none", message: "<p>Welcome</p>" },
+    { id: 2, uuid: "b2", type: "none", message: "<p>Second</p>" },
+] as FormBlockModel[];
+
+const stubs = {
+    DocumentList: {
+        template: `<div><div id="row-b1" /><div id="row-b2" /></div>`,
+    },
+    BlockLogicEditor: true,
+};
+
+let wrapper: VueWrapper | undefined;
+const scrolled = vi.fn();
+
+describe("the form document", () => {
+    beforeEach(() => {
+        Element.prototype.scrollIntoView = function (
+            this: Element,
+            options?: boolean | ScrollIntoViewOptions,
+        ) {
+            scrolled(this.id, (options as ScrollIntoViewOptions)?.block);
+        };
+        scrolled.mockClear();
+        useForm().$reset();
+        useWorkbench().$reset();
+    });
+
+    afterEach(() => wrapper?.unmount());
+
+    it("scrolls the question opened by link into view once it loads", async () => {
+        wrapper = mount(FormDocument, {
+            props: { status: "loading" },
+            global: { stubs },
+            attachTo: document.body,
+        });
+
+        useForm().blocks = blocks;
+        useWorkbench().block = blocks[1];
+        await wrapper.setProps({ status: "loaded" });
+        await wrapper.vm.$nextTick();
+
+        // the smallest scroll, so a question already in view stays put
+        expect(scrolled).toHaveBeenCalledWith("row-b2", "nearest");
+    });
+
+    it("opens and scrolls to a question picked in the outline", async () => {
+        useForm().blocks = blocks;
+        wrapper = mount(FormDocument, {
+            props: { status: "loaded" },
+            global: { stubs },
+            attachTo: document.body,
+        });
+
+        await wrapper.findAll("nav li button")[1].trigger("click");
+        await flushPromises();
+
+        expect(useWorkbench().putOnWorkbench).toHaveBeenCalledWith(blocks[1]);
+        expect(scrolled).toHaveBeenCalledWith("row-b2", "start");
+    });
+});
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 58ac1ce4..b9c6d3ae 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -1,59 +1,119 @@
 <template>
-  <div
-    id="form-document"
-    ref="root"
-    class="h-full w-full overflow-y-auto bg-white"
-  >
-    <div class="mx-auto w-full max-w-[720px] px-2 pb-40 pt-6 sm:px-6 sm:pt-10">
-      <div v-if="status !== 'loaded'" class="pl-12">
-        <QuestionsLoadState :status="status" @retry="retry" />
-      </div>
+  <div class="relative flex h-full w-full">
+    <div
+      class="hidden w-[232px] shrink-0 overflow-y-auto border-r border-grey-200 bg-grey-50 xl:block"
+    >
+      <DocumentOutline
+        v-if="status === 'loaded'"
+        :numbers="numbers"
+        @pick="pick"
+      />
+    </div>
 
-      <template v-else>
-        <h1 class="sr-only">Questions</h1>
-        <p class="mb-4 pl-12 text-sm tabular-nums text-grey-600">
-          {{ countLine }}
-        </p>
-
-        <DocumentList v-if="store.hasBlocks" :numbers="numbers" />
-        <EmptyState
-          v-else
-          title="No questions yet"
-          description="Add your first question below."
-        />
-
-        <div ref="addButtons" class="mt-4 flex flex-wrap gap-2 pl-12">
-          <D9Button
-            label="Add question"
-            color="dark"
-            icon="plus"
-            icon-position="left"
-            @click="addBlock()"
-          />
-          <D9Button
-            label="Add group"
-            color="light"
-            icon="layer-group"
-            icon-position="left"
-            @click="addBlock(null, 'group')"
-          />
+    <div
+      id="form-document"
+      ref="root"
+      class="h-full min-w-0 flex-1 overflow-y-auto bg-white"
+    >
+      <div
+        class="mx-auto w-full max-w-[720px] px-2 pb-40 pt-6 sm:px-6 sm:pt-10"
+      >
+        <div v-if="status !== 'loaded'" class="pl-12">
+          <QuestionsLoadState :status="status" @retry="retry" />
         </div>
-      </template>
+
+        <template v-else>
+          <h1 class="sr-only">Questions</h1>
+          <div class="mb-4 flex items-center justify-between gap-2 pl-12">
+            <p class="text-sm tabular-nums text-grey-600">{{ countLine }}</p>
+            <!-- from lg it sits in the margin, out of the scrolling column, so it stays in view -->
+            <button
+              v-if="store.hasBlocks"
+              type="button"
+              class="flex h-11 items-center gap-1.5 rounded-md border border-grey-300 bg-white px-2.5 text-[13px] font-semibold text-grey-700 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:absolute lg:h-8 lg:left-4 lg:top-3 lg:z-10 xl:hidden"
+              aria-haspopup="dialog"
+              :aria-expanded="outlineOpen"
+              @click="outlineOpen = true"
+            >
+              <D9Icon name="list-ul" aria-hidden="true" />
+              Outline
+            </button>
+          </div>
+
+          <DocumentList v-if="store.hasBlocks" :numbers="numbers" />
+          <EmptyState
+            v-else
+            title="No questions yet"
+            description="Add your first question below."
+          />
+
+          <div ref="addButtons" class="mt-4 flex flex-wrap gap-2 pl-12">
+            <D9Button
+              label="Add question"
+              class="min-h-11 lg:min-h-0"
+              color="dark"
+              icon="plus"
+              icon-position="left"
+              @click="addBlock()"
+            />
+            <D9Button
+              label="Add group"
+              class="min-h-11 lg:min-h-0"
+              color="light"
+              icon="layer-group"
+              icon-position="left"
+              @click="addBlock(null, 'group')"
+            />
+          </div>
+        </template>
+      </div>
     </div>
   </div>
+
+  <Dialog
+    :open="outlineOpen"
+    class="relative z-50 xl:hidden"
+    aria-label="Outline"
+    @close="outlineOpen = false"
+  >
+    <div class="fixed inset-0 bg-grey-900/20" aria-hidden="true" />
+    <DialogPanel
+      class="fixed inset-y-0 left-0 w-[232px] overflow-y-auto border-r border-grey-200 bg-grey-50 shadow-xl"
+    >
+      <DocumentOutline :numbers="numbers" @pick="pick">
+        <template #close>
+          <button
+            type="button"
+            aria-label="Close outline"
+            class="grid h-11 w-11 place-items-center rounded-md text-grey-600 hover:bg-grey-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:h-8 lg:w-8"
+            @click="outlineOpen = false"
+          >
+            <D9Icon name="xmark" />
+          </button>
+        </template>
+      </DocumentOutline>
+    </DialogPanel>
+  </Dialog>
   <BlockLogicEditor />
 </template>
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from "vue";
-import { D9Button } from "@deck9/ui";
+import { Dialog, DialogPanel } from "@headlessui/vue";
+import { D9Button, D9Icon } from "@deck9/ui";
 import { useForm, useWorkbench } from "@/stores";
 import EmptyState from "@/components/EmptyState.vue";
 import QuestionsLoadState from "@/components/Factory/Shared/QuestionsLoadState.vue";
 import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue";
 import DocumentList from "./DocumentList.vue";
+import DocumentOutline from "./DocumentOutline.vue";
 import { questionNumbers } from "./questionSummary";
-import { focusBlock, useAddBlock } from "./blockFocus";
+import {
+  cursorFor,
+  focusBlock,
+  scrollToBlock,
+  useAddBlock,
+} from "./blockFocus";
 
 const props = defineProps<{
   status: "loading" | "failed" | "loaded";
@@ -95,6 +155,28 @@ watch(
   },
 );
 
+// a question opened by link (?block=) may sit far down; one in view stays put
+watch(
+  () => props.status,
+  (status) => {
+    if (status === "loaded" && workbench.block) {
+      scrollToBlock(workbench.block.uuid, "nearest");
+    }
+  },
+);
+
+const outlineOpen = ref(false);
+
+// jumps to a question and puts the cursor in it
+const pick = async (block: FormBlockModel) => {
+  outlineOpen.value = false;
+  // the closing panel gives focus back to its button first
+  await nextTick();
+  cursorFor.value = block.uuid;
+  workbench.putOnWorkbench(block);
+  scrollToBlock(block.uuid);
+};
+
 const numbers = computed(() => questionNumbers(store.blocks ?? []));
 
 const countLine = computed(() => {
diff --git a/resources/js/components/Factory/Document/QuestionCard.test.ts b/resources/js/components/Factory/Document/QuestionCard.test.ts
index 6b058951..66914e25 100644
--- a/resources/js/components/Factory/Document/QuestionCard.test.ts
+++ b/resources/js/components/Factory/Document/QuestionCard.test.ts
@@ -11,37 +11,70 @@ const block = {
     interactions: [],
 } as unknown as FormBlockModel;
 
+const stubs = {
+    Editor: true,
+    BlockMenu: true,
+    QuestionSettings: {
+        props: ["id"],
+        template: `<div :id="id">settings</div>`,
+    },
+};
+
 let wrapper: VueWrapper | undefined;
 
+const mountCard = (phone: boolean, withStubs: object = stubs) => {
+    window.matchMedia = vi.fn().mockReturnValue({
+        matches: phone,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+    });
+    wrapper = mount(QuestionCard, {
+        props: { block: useWorkbench().block ?? block, number: 4 },
+        global: { stubs: withStubs },
+        attachTo: document.body,
+    });
+    return wrapper;
+};
+const settingsButton = () =>
+    wrapper!.findAll("button").find((b) => b.text() === "Settings")!;
+
 describe("an open question", () => {
     beforeEach(() => {
+        globalThis.ResizeObserver ??= class {
+            observe() {}
+            unobserve() {}
+            disconnect() {}
+        } as unknown as typeof ResizeObserver;
         useWorkbench().$reset();
         useForm().$reset();
     });
 
     afterEach(() => wrapper?.unmount());
 
-    it("makes its answer field without opening Settings", async () => {
-        const workbench = useWorkbench();
-        useForm().mapping = { "input-short": "input" } as Record<
-            FormBlockType,
-            FormBlockInteractionType
-        >;
-        workbench.block = { ...block, interactions: [] };
-        vi.mocked(workbench.createInteraction).mockResolvedValue({
-            id: 9,
-            type: "input",
-            label: "",
-        } as unknown as FormBlockInteractionModel);
+    it.each([
+        ["a wider screen", false],
+        ["a phone", true],
+    ])(
+        "makes its answer field without opening Settings, on %s",
+        async (_, phone) => {
+            const workbench = useWorkbench();
+            useForm().mapping = { "input-short": "input" } as Record<
+                FormBlockType,
+                FormBlockInteractionType
+            >;
+            workbench.block = { ...block, interactions: [] };
+            vi.mocked(workbench.createInteraction).mockResolvedValue({
+                id: 9,
+                type: "input",
+                label: "",
+            } as unknown as FormBlockInteractionModel);
 
-        wrapper = mount(QuestionCard, {
-            props: { block: workbench.block, number: 4 },
-            global: { stubs: { Editor: true, BlockMenu: true } },
-        });
-        await flushPromises();
+            mountCard(phone, { Editor: true, BlockMenu: true });
+            await flushPromises();
 
-        expect(workbench.createInteraction).toHaveBeenCalledWith("input");
-    });
+            expect(workbench.createInteraction).toHaveBeenCalledWith("input");
+        },
+    );
 
     it("shows Required only when the question takes an answer", () => {
         const stubs = { Editor: true, BlockMenu: true, QuestionSettings: true };
@@ -60,16 +93,62 @@ describe("an open question", () => {
     });
 
     it("points the Settings button at its panel", () => {
-        wrapper = mount(QuestionCard, {
-            props: { block, number: 4 },
-            global: { stubs: { Editor: true, BlockMenu: true } },
-        });
-        const button = wrapper
-            .findAll("button")
-            .find((b) => b.text() === "Settings")!;
+        mountCard(false, { Editor: true, BlockMenu: true });
 
-        const panel = wrapper.find(`#${button.attributes("aria-controls")}`);
+        const panel = wrapper!.find(
+            `#${settingsButton().attributes("aria-controls")}`,
+        );
         expect(panel.exists()).toBe(true);
         expect(panel.attributes("role")).toBe("group");
     });
+
+    it("opens its settings inside the card on a wider screen", async () => {
+        mountCard(false);
+        await settingsButton().trigger("click");
+
+        expect(wrapper!.find("#question-q4-settings").isVisible()).toBe(true);
+        expect(document.querySelector("[role=dialog]")).toBeNull();
+    });
+
+    it("opens its settings as a bottom sheet on a phone, and Done closes it", async () => {
+        mountCard(true);
+        await settingsButton().trigger("click");
+        await flushPromises();
+
+        const sheet = document.querySelector<HTMLElement>("[role=dialog]");
+        expect(sheet?.textContent).toContain("Question 4 settings");
+        expect(sheet?.textContent).toContain("settings");
+
+        const done = [...sheet!.querySelectorAll("button")].find(
+            (b) => b.textContent?.trim() === "Done",
+        );
+        done!.click();
+        await flushPromises();
+
+        // closed but kept, hidden: its answer field settings stay mounted
+        expect(
+            document.querySelector<HTMLElement>("[role=dialog]")?.hidden,
+        ).toBe(true);
+        expect(document.getElementById("question-q4-settings")).not.toBeNull();
+        // the kept sheet doesn't give focus back by itself
+        expect(document.activeElement).toBe(settingsButton().element);
+    });
+
+    it("gives focus back to Settings when Esc closes the sheet", async () => {
+        mountCard(true);
+        await settingsButton().trigger("click");
+        await flushPromises();
+
+        document
+            .querySelector("[role=dialog]")!
+            .dispatchEvent(
+                new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+            );
+        await flushPromises();
+
+        expect(
+            document.querySelector<HTMLElement>("[role=dialog]")?.hidden,
+        ).toBe(true);
+        expect(document.activeElement).toBe(settingsButton().element);
+    });
 });
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index f48cbae1..a81c38ef 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-sm ring-1 ring-blue-500 sm:p-4"
+    class="touch-fields min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-sm ring-1 ring-blue-500 sm:p-4"
   >
     <span :id="`${id}-text-label`" class="sr-only"
       >Question {{ number }} text</span
@@ -23,8 +23,14 @@
         />
       </div>
 
-      <div v-if="type?.value !== 'none'" class="flex items-center gap-2">
-        <label :for="`${id}-required`" class="text-sm text-grey-700">
+      <div
+        v-if="type?.value !== 'none'"
+        class="flex min-h-11 items-center gap-2 lg:min-h-0"
+      >
+        <label
+          :for="`${id}-required`"
+          class="flex h-11 items-center text-sm text-grey-700 lg:h-auto"
+        >
           Required
         </label>
         <D9Switch
@@ -38,10 +44,12 @@
 
       <div class="ml-auto flex items-center gap-1">
         <button
+          ref="settingsButton"
           type="button"
-          class="flex h-9 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          class="flex h-11 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 lg:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           :aria-expanded="settingsOpen"
           :aria-controls="`${id}-settings`"
+          :aria-haspopup="isPhone ? 'dialog' : undefined"
           @click="settingsOpen = !settingsOpen"
         >
           Settings
@@ -53,7 +61,7 @@
         </button>
         <button
           type="button"
-          class="flex h-9 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          class="flex h-11 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 lg:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           @click="logic.showLogicEditor(block)"
         >
           Rules<span v-if="block.logics?.length" class="tabular-nums"
@@ -64,18 +72,56 @@
       </div>
     </div>
 
-    <!-- v-show: the Configure* parts make the answer field when they mount -->
+    <!-- one QuestionSettings, mounted while the card is open, also when
+         hidden: the Configure* parts make the answer field when they mount -->
     <QuestionSettings
+      v-if="!isPhone"
       v-show="settingsOpen"
       :id="`${id}-settings`"
       :block="block"
       :interaction-type="interactionType"
     />
+
+    <Dialog
+      v-else
+      :open="settingsOpen"
+      :unmount="false"
+      class="relative z-50"
+      @close="settingsOpen = false"
+    >
+      <div class="fixed inset-0 bg-grey-900/40" aria-hidden="true" />
+      <DialogPanel
+        class="touch-fields fixed inset-x-0 bottom-0 flex h-[70%] flex-col rounded-t-2xl bg-white shadow-xl"
+      >
+        <div class="flex shrink-0 items-center justify-between pl-4 pr-1 pt-2">
+          <DialogTitle class="text-base font-semibold text-grey-900">
+            Question {{ number }} settings
+          </DialogTitle>
+          <button
+            type="button"
+            class="h-11 rounded-md px-3 text-base font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+            @click="settingsOpen = false"
+          >
+            Done
+          </button>
+        </div>
+        <div class="min-h-0 flex-1 overflow-y-auto px-4 pb-6 pt-1">
+          <QuestionSettings
+            :id="`${id}-settings`"
+            :block="block"
+            :interaction-type="interactionType"
+            sheet
+          />
+        </div>
+      </DialogPanel>
+    </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, provide, ref, watch } from "vue";
+import { computed, nextTick, onMounted, provide, ref, watch } from "vue";
+import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
+import { useMediaQuery } from "@vueuse/core";
 import { D9Icon, D9Select, D9Switch } from "@deck9/ui";
 import { useLogic, useWorkbench } from "@/stores";
 import Editor from "@/components/Factory/Shared/Editor.vue";
@@ -106,6 +152,17 @@ const message = ref(props.block.message ?? "");
 const type = ref(types.value.find((item) => item.value === props.block.type));
 const required = ref(props.block.is_required ?? false);
 const settingsOpen = ref(false);
+// below Tailwind's sm, Settings opens as a bottom sheet
+const isPhone = useMediaQuery("(max-width: 639px)");
+const settingsButton = ref<HTMLButtonElement | null>(null);
+
+// the kept sheet doesn't give focus back when it closes
+watch(settingsOpen, async (open) => {
+  if (!open && isPhone.value) {
+    await nextTick();
+    settingsButton.value?.focus();
+  }
+});
 
 watch(message, (value) => workbench.updateBlock({ message: value }));
 watch(required, (value) => workbench.updateBlock({ is_required: value }));
diff --git a/resources/js/components/Factory/Document/QuestionSettings.vue b/resources/js/components/Factory/Document/QuestionSettings.vue
index 675c6149..17893bb0 100644
--- a/resources/js/components/Factory/Document/QuestionSettings.vue
+++ b/resources/js/components/Factory/Document/QuestionSettings.vue
@@ -3,9 +3,14 @@
     :id="id"
     role="group"
     :aria-labelledby="`${id}-title`"
-    class="space-y-6 rounded-md border border-grey-200 bg-grey-50 p-3 sm:p-4"
+    class="space-y-6"
+    :class="!sheet && 'rounded-md border border-grey-200 bg-grey-50 p-3 sm:p-4'"
   >
-    <h3 :id="`${id}-title`" class="text-xs font-semibold text-grey-600">
+    <h3
+      :id="`${id}-title`"
+      class="text-xs font-semibold text-grey-600"
+      :class="sheet && 'sr-only'"
+    >
       Settings
     </h3>
 
@@ -79,6 +84,8 @@ const props = defineProps<{
   id: string;
   block: FormBlockModel;
   interactionType?: FormBlockInteractionType;
+  // in the phone's bottom sheet, which has its own title
+  sheet?: boolean;
 }>();
 
 const workbench = useWorkbench();
diff --git a/resources/js/components/Factory/Document/blockFocus.ts b/resources/js/components/Factory/Document/blockFocus.ts
index 3cf67911..f8dcf4c6 100644
--- a/resources/js/components/Factory/Document/blockFocus.ts
+++ b/resources/js/components/Factory/Document/blockFocus.ts
@@ -22,6 +22,15 @@ export async function focusBlock(block: FormBlockModel | null): Promise<boolean>
     return name !== null;
 }
 
+// brings a question or group into view, by default to the top of the document
+export async function scrollToBlock(
+    uuid: string,
+    block: ScrollLogicalPosition = "start",
+) {
+    await nextTick();
+    document.getElementById(`row-${uuid}`)?.scrollIntoView({ block });
+}
+
 // a new block opens with the cursor in it
 export function useAddBlock() {
     const store = useForm();
diff --git a/resources/js/components/Factory/Main/ChoiceRowActions.vue b/resources/js/components/Factory/Main/ChoiceRowActions.vue
index 0c8b21dc..fa0d0587 100644
--- a/resources/js/components/Factory/Main/ChoiceRowActions.vue
+++ b/resources/js/components/Factory/Main/ChoiceRowActions.vue
@@ -3,7 +3,7 @@
     <span
       aria-hidden="true"
       title="Drag to reorder"
-      class="handle grid h-7 w-6 cursor-grab place-items-center text-grey-500 hover:text-grey-900"
+      class="handle grid h-11 w-11 cursor-grab place-items-center text-grey-500 hover:text-grey-900 lg:h-7 lg:w-6"
     >
       <D9Icon name="grip-vertical" />
     </span>
@@ -11,7 +11,7 @@
       type="button"
       :aria-label="`Delete ${label}`"
       :title="`Delete ${label}`"
-      class="grid h-7 w-7 place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      class="grid h-11 w-11 place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:h-7 lg:w-7"
       @click="$emit('onDelete')"
     >
       <D9Icon name="trash" />
diff --git a/resources/js/components/Factory/Main/ConfigureClicks.vue b/resources/js/components/Factory/Main/ConfigureClicks.vue
index 2c34a4b0..f7119135 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.vue
+++ b/resources/js/components/Factory/Main/ConfigureClicks.vue
@@ -32,7 +32,7 @@
       aria-label="Add choice"
       aria-describedby="add-choice-hint"
       :aria-busy="isCreatingInteraction"
-      class="mt-1 flex h-9 w-full items-center gap-2 rounded-md border border-dashed border-grey-300 px-2 text-sm font-medium text-grey-700 hover:border-grey-400 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      class="mt-1 flex h-11 w-full items-center gap-2 rounded-md border border-dashed border-grey-300 px-2 text-sm font-medium text-grey-700 hover:border-grey-400 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:h-9"
       @click="createClickInteraction"
     >
       <D9Icon name="plus" aria-hidden="true" />
diff --git a/resources/js/components/Factory/Main/ConfigureConsents.vue b/resources/js/components/Factory/Main/ConfigureConsents.vue
index ae69b019..ccd1c473 100644
--- a/resources/js/components/Factory/Main/ConfigureConsents.vue
+++ b/resources/js/components/Factory/Main/ConfigureConsents.vue
@@ -3,7 +3,7 @@
     <EmptyState
       v-if="workbench.currentInteractions?.length === 0"
       title="Nothing here yet."
-      description="Add your first option by clicking on the button below."
+      description="Add your first policy with the button below."
     />
 
     <Container
@@ -26,22 +26,23 @@
       </Draggable>
     </Container>
 
-    <div ref="addRow" class="mt-8">
-      <D9Button
-        label="Add new policy"
-        icon="plus"
-        icon-position="left"
-        color="dark"
-        :isLoading="isCreatingInteraction"
+    <div ref="addRow" class="mt-1">
+      <button
+        type="button"
+        :aria-busy="isCreatingInteraction"
+        class="flex h-11 w-full items-center gap-2 rounded-md border border-dashed border-grey-300 px-2 text-sm font-medium text-grey-700 hover:border-grey-400 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:h-9"
         @click="createConsentPolicy"
-      />
+      >
+        <D9Icon name="plus" aria-hidden="true" />
+        Add policy
+      </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useWorkbench } from "@/stores";
-import { D9Button } from "@deck9/ui";
+import { D9Icon } from "@deck9/ui";
 import { ref, nextTick } from "vue";
 import ConsentInteraction from "./Interactions/ConsentInteraction.vue";
 import { Container, Draggable } from "vue3-smooth-dnd";
diff --git a/resources/js/components/Factory/Main/ConfigureFile.vue b/resources/js/components/Factory/Main/ConfigureFile.vue
index 57abb6f1..04ea2fd3 100644
--- a/resources/js/components/Factory/Main/ConfigureFile.vue
+++ b/resources/js/components/Factory/Main/ConfigureFile.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="mb-4">
     <D9Label label="Allowed File Types" />
-    <div v-for="fileType in availableFileTypes" :key="fileType.key">
+    <div
+      v-for="fileType in availableFileTypes"
+      :key="fileType.key"
+      class="flex min-h-11 items-center lg:min-h-0"
+    >
       <D9Checkbox
         :id="'check' + fileType.key"
         v-model="allowedFileTypes[fileType.key]"
diff --git a/resources/js/components/Factory/Main/ConfigureRange.vue b/resources/js/components/Factory/Main/ConfigureRange.vue
index 4ae32dcb..37e661a6 100644
--- a/resources/js/components/Factory/Main/ConfigureRange.vue
+++ b/resources/js/components/Factory/Main/ConfigureRange.vue
@@ -61,7 +61,11 @@
           block
           show-color-picker
         />
-        <button type="button" class="text-xs text-blue-600" @click="resetColor">
+        <button
+          type="button"
+          class="inline-flex min-h-11 items-center text-xs text-blue-600 lg:min-h-0"
+          @click="resetColor"
+        >
           Use default
         </button>
       </div>
diff --git a/resources/js/components/Factory/Shared/Editor.vue b/resources/js/components/Factory/Shared/Editor.vue
index 180df07a..e0660f38 100644
--- a/resources/js/components/Factory/Shared/Editor.vue
+++ b/resources/js/components/Factory/Shared/Editor.vue
@@ -3,7 +3,7 @@
     <div
       role="group"
       aria-label="Text format"
-      class="mb-1 flex flex-wrap gap-y-2 items-center"
+      class="mb-1 flex items-center overflow-x-auto [&>div]:shrink-0 lg:flex-wrap lg:gap-y-2"
       :class="!bare && 'py-1 bg-white border border-grey-300 rounded-lg'"
     >
       <div class="px-1">
@@ -159,7 +159,10 @@ const editor = useEditor({
   editorProps: {
     attributes: {
       class: `form-message-prose conversation-theme focus:outline-none text-grey-800 ${
-        bare ? "" : "border border-grey-300 bg-white px-5 py-3 rounded-md"
+        bare
+          ? // a 2 px bar shows focus; margin, border and padding add up to 0
+            "-ml-2 border-l-2 border-transparent pl-1.5 focus:border-blue-500"
+          : "border border-grey-300 bg-white px-5 py-3 rounded-md"
       }`,
       ...(id ? { id, "aria-labelledby": `${id}-label` } : {}),
     },
diff --git a/resources/js/components/Factory/Shared/EditorButton.vue b/resources/js/components/Factory/Shared/EditorButton.vue
index 81d3fce4..266b1cd5 100644
--- a/resources/js/components/Factory/Shared/EditorButton.vue
+++ b/resources/js/components/Factory/Shared/EditorButton.vue
@@ -4,7 +4,7 @@
     :aria-label="label"
     :aria-pressed="isActive"
     :class="[
-      'rounded px-2 mx-px py-1 relative text-sm',
+      'rounded px-2 mx-px py-1 relative text-sm min-h-11 min-w-11 lg:min-h-0 lg:min-w-0',
       isActive
         ? 'bg-grey-300 text-grey-700'
         : 'text-grey-500 hover:bg-grey-200 bg-white',
@@ -14,7 +14,7 @@
     <D9Icon :name="icon" />
     <small
       v-if="subLabel"
-      class="absolute bottom-1 text-xxs font-bold leading-none rounded-full"
+      class="absolute bottom-3 lg:bottom-1 text-xxs font-bold leading-none rounded-full"
       >{{ subLabel }}</small
     >
   </button>