From d61a7c23f67e73a4b3c01f12f62f0e49a2847efa Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:23:36 +0200
Subject: [PATCH 01/17] fix: scroll a question opened by link into view

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentGroup.vue        |  3 +-
 .../Factory/Document/DocumentQuestion.vue     |  2 +-
 .../Factory/Document/FormDocument.test.ts     | 47 +++++++++++++++++++
 .../Factory/Document/FormDocument.vue         | 12 ++++-
 .../components/Factory/Document/blockFocus.ts |  6 +++
 5 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 resources/js/components/Factory/Document/FormDocument.test.ts

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 7dc4f658..6143bb92 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -1,7 +1,8 @@
 <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="flex flex-wrap items-center gap-x-2 gap-y-1 pb-2 pl-3">
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 37f8d992..65bec435 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :id="`row-${block.uuid}`" class="group/question flex items-start">
+  <div :id="`row-${block.uuid}`" class="group/question flex scroll-mt-4 items-start">
     <div class="flex w-12 shrink-0 flex-col items-end gap-1 pr-2 pt-3">
       <span
         aria-hidden="true"
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..978ec579
--- /dev/null
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -0,0 +1,47 @@
+import { 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) {
+            scrolled(this.id);
+        };
+        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();
+
+        expect(scrolled).toHaveBeenCalledWith("row-b2");
+    });
+});
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 58ac1ce4..04128151 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -53,7 +53,7 @@ import QuestionsLoadState from "@/components/Factory/Shared/QuestionsLoadState.v
 import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue";
 import DocumentList from "./DocumentList.vue";
 import { questionNumbers } from "./questionSummary";
-import { focusBlock, useAddBlock } from "./blockFocus";
+import { focusBlock, scrollToBlock, useAddBlock } from "./blockFocus";
 
 const props = defineProps<{
   status: "loading" | "failed" | "loaded";
@@ -95,6 +95,16 @@ watch(
   },
 );
 
+// a question opened by link (?block=) may sit far down
+watch(
+  () => props.status,
+  (status) => {
+    if (status === "loaded" && workbench.block) {
+      scrollToBlock(workbench.block.uuid);
+    }
+  },
+);
+
 const numbers = computed(() => questionNumbers(store.blocks ?? []));
 
 const countLine = computed(() => {
diff --git a/resources/js/components/Factory/Document/blockFocus.ts b/resources/js/components/Factory/Document/blockFocus.ts
index ee244b86..c2cf383f 100644
--- a/resources/js/components/Factory/Document/blockFocus.ts
+++ b/resources/js/components/Factory/Document/blockFocus.ts
@@ -22,6 +22,12 @@ export async function focusBlock(block: FormBlockModel | null): Promise<boolean>
     return name !== null;
 }
 
+// brings a question or group to the top of the document
+export async function scrollToBlock(uuid: string) {
+    await nextTick();
+    document.getElementById(`row-${uuid}`)?.scrollIntoView({ block: "start" });
+}
+
 // a new block opens with the cursor in it
 export function useAddBlock() {
     const store = useForm();

From 3943fa4cac45c3d6a98fae02fb68a3e89ba8740b Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:25:47 +0200
Subject: [PATCH 02/17] feat: add an outline to jump to a question

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentOutline.test.ts  | 44 +++++++++
 .../Factory/Document/DocumentOutline.vue      | 78 ++++++++++++++++
 .../Factory/Document/FormDocument.test.ts     | 17 +++-
 .../Factory/Document/FormDocument.vue         | 92 ++++++++++++++++---
 4 files changed, 219 insertions(+), 12 deletions(-)
 create mode 100644 resources/js/components/Factory/Document/DocumentOutline.test.ts
 create mode 100644 resources/js/components/Factory/Document/DocumentOutline.vue

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..7adedab8
--- /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-8 items-center justify-between pl-2">
+      <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-8 w-full items-center gap-2 rounded-md pr-2 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/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index 978ec579..d04ceae5 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -1,4 +1,4 @@
-import { mount, VueWrapper } from "@vue/test-utils";
+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";
@@ -44,4 +44,19 @@ describe("the form document", () => {
 
         expect(scrolled).toHaveBeenCalledWith("row-b2");
     });
+
+    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");
+    });
 });
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 04128151..1cd299e2 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -1,19 +1,44 @@
 <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 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>
+
+    <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 v-else>
         <h1 class="sr-only">Questions</h1>
-        <p class="mb-4 pl-12 text-sm tabular-nums text-grey-600">
-          {{ countLine }}
-        </p>
+        <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 sm:h-8 lg:absolute 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
@@ -39,21 +64,54 @@
           />
         </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 sm:h-8 sm: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, scrollToBlock, useAddBlock } from "./blockFocus";
+import {
+  cursorFor,
+  focusBlock,
+  scrollToBlock,
+  useAddBlock,
+} from "./blockFocus";
 
 const props = defineProps<{
   status: "loading" | "failed" | "loaded";
@@ -105,6 +163,18 @@ watch(
   },
 );
 
+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(() => {

From 1c57ee6a262a5be835e43efe773238ef1f6e05da Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:26:55 +0200
Subject: [PATCH 03/17] feat: open a question's settings as a bottom sheet on
 phones

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/QuestionCard.test.ts     | 74 +++++++++++++++++++
 .../Factory/Document/QuestionCard.vue         | 43 ++++++++++-
 .../Factory/Document/QuestionSettings.vue     | 11 ++-
 3 files changed, 125 insertions(+), 3 deletions(-)
 create mode 100644 resources/js/components/Factory/Document/QuestionCard.test.ts

diff --git a/resources/js/components/Factory/Document/QuestionCard.test.ts b/resources/js/components/Factory/Document/QuestionCard.test.ts
new file mode 100644
index 00000000..28f89cd6
--- /dev/null
+++ b/resources/js/components/Factory/Document/QuestionCard.test.ts
@@ -0,0 +1,74 @@
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useWorkbench } from "@/stores";
+import QuestionCard from "./QuestionCard.vue";
+
+const block = {
+    id: 4,
+    uuid: "q4",
+    type: "input-short",
+    message: "<p>Your name?</p>",
+} 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) => {
+    window.matchMedia = vi.fn().mockReturnValue({
+        matches: phone,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+    });
+    wrapper = mount(QuestionCard, {
+        props: { block, number: 4 },
+        global: { stubs },
+        attachTo: document.body,
+    });
+    return wrapper;
+};
+const settingsButton = () =>
+    wrapper!.findAll("button").find((b) => b.text() === "Settings")!;
+
+describe("a question's settings", () => {
+    beforeEach(() => {
+        globalThis.ResizeObserver ??= class {
+            observe() {}
+            unobserve() {}
+            disconnect() {}
+        } as unknown as typeof ResizeObserver;
+        useWorkbench().$reset();
+    });
+
+    afterEach(() => wrapper?.unmount());
+
+    it("open inside the card on a wider screen", async () => {
+        mountCard(false);
+        await settingsButton().trigger("click");
+
+        expect(wrapper!.text()).toContain("settings");
+        expect(document.querySelector("[role=dialog]")).toBeNull();
+    });
+
+    it("open as a bottom sheet on a phone, and Done closes it", async () => {
+        mountCard(true);
+        await settingsButton().trigger("click");
+        await flushPromises();
+
+        const sheet = document.querySelector("[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();
+
+        expect(document.querySelector("[role=dialog]")).toBeNull();
+    });
+});
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index a651d573..7f3eb8d4 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -42,6 +42,7 @@
           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"
           :aria-expanded="settingsOpen"
           :aria-controls="`${id}-settings`"
+          :aria-haspopup="isPhone ? 'dialog' : undefined"
           @click="settingsOpen = !settingsOpen"
         >
           Settings
@@ -65,16 +66,54 @@
     </div>
 
     <QuestionSettings
-      v-if="settingsOpen"
+      v-if="settingsOpen && !isPhone"
       :id="`${id}-settings`"
       :block="block"
       :interaction-type="interactionType"
     />
+
+    <Dialog
+      :open="settingsOpen && isPhone"
+      class="relative z-50"
+      @close="settingsOpen = false"
+    >
+      <div class="fixed inset-0 bg-grey-900/40" aria-hidden="true" />
+      <DialogPanel
+        class="fixed inset-x-0 bottom-0 flex h-[70%] flex-col rounded-t-2xl bg-white shadow-xl"
+      >
+        <span
+          aria-hidden="true"
+          class="mx-auto mt-2 h-1 w-9 shrink-0 rounded-full bg-grey-300"
+        />
+        <div class="flex shrink-0 items-center justify-between pl-4 pr-1">
+          <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 { 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";
@@ -105,6 +144,8 @@ 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)");
 
 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 0afbb7f7..0ef0090e 100644
--- a/resources/js/components/Factory/Document/QuestionSettings.vue
+++ b/resources/js/components/Factory/Document/QuestionSettings.vue
@@ -2,9 +2,14 @@
   <div
     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>
 
@@ -78,6 +83,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();

From 91186a393403610d55e6a3a0751cfed959818c24 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:28:55 +0200
Subject: [PATCH 04/17] fix: make the editor's controls 44 px on phones

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/BlockMenu.vue   | 2 +-
 .../js/components/Factory/Document/DocumentQuestion.vue  | 2 +-
 .../js/components/Factory/Document/FormDocument.vue      | 2 ++
 .../js/components/Factory/Document/QuestionCard.vue      | 9 ++++++---
 .../js/components/Factory/Main/ChoiceRowActions.vue      | 4 ++--
 resources/js/components/Factory/Main/ConfigureClicks.vue | 1 +
 resources/js/components/Factory/Shared/Editor.vue        | 2 +-
 resources/js/components/Factory/Shared/EditorButton.vue  | 4 ++--
 8 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/Factory/Document/BlockMenu.vue b/resources/js/components/Factory/Document/BlockMenu.vue
index 6c351edb..2805dfd8 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 sm:h-9 sm:w-9 bg-white text-grey-700 hover:bg-grey-100"
       >
         <D9Icon name="ellipsis-h" />
         <span class="sr-only">{{ label }}</span>
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 65bec435..89b77fae 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -9,7 +9,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.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 1cd299e2..bfdc9a76 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -50,6 +50,7 @@
         <div ref="addButtons" class="mt-4 flex flex-wrap gap-2 pl-12">
           <D9Button
             label="Add question"
+            class="min-h-11 sm:min-h-0"
             color="dark"
             icon="plus"
             icon-position="left"
@@ -57,6 +58,7 @@
           />
           <D9Button
             label="Add group"
+            class="min-h-11 sm:min-h-0"
             color="light"
             icon="layer-group"
             icon-position="left"
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index 7f3eb8d4..2fb1f694 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -24,7 +24,10 @@
       </div>
 
       <div class="flex items-center gap-2">
-        <label :for="`${id}-required`" class="text-sm text-grey-700">
+        <label
+          :for="`${id}-required`"
+          class="flex h-11 items-center text-sm text-grey-700 sm:h-auto"
+        >
           Required
         </label>
         <D9Switch
@@ -39,7 +42,7 @@
       <div class="ml-auto flex items-center gap-1">
         <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 sm: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"
@@ -54,7 +57,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 sm: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"
diff --git a/resources/js/components/Factory/Main/ChoiceRowActions.vue b/resources/js/components/Factory/Main/ChoiceRowActions.vue
index 58b546a6..498d2466 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-9 w-6 cursor-grab place-items-center text-grey-500 hover:text-grey-900"
+      class="handle grid h-11 w-11 cursor-grab sm:h-9 sm:w-6 place-items-center text-grey-500 hover:text-grey-900"
     >
       <D9Icon name="grip-vertical" />
     </span>
@@ -11,7 +11,7 @@
       type="button"
       :aria-label="`Delete ${label}`"
       :title="`Delete ${label}`"
-      class="grid h-9 w-9 place-items-center rounded-md 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-md text-grey-500 sm:h-9 sm:w-9 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
       @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 c8286a2e..23a6a921 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.vue
+++ b/resources/js/components/Factory/Main/ConfigureClicks.vue
@@ -29,6 +29,7 @@
     <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
       <D9Button
         label="Add new option"
+        class="min-h-11 sm:min-h-0"
         icon="plus"
         icon-position="left"
         color="dark"
diff --git a/resources/js/components/Factory/Shared/Editor.vue b/resources/js/components/Factory/Shared/Editor.vue
index 5a5b6649..c6cfda5d 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 py-1 bg-white border border-grey-300 rounded-lg flex flex-wrap gap-y-2 items-center"
+      class="mb-1 py-1 bg-white border border-grey-300 rounded-lg flex items-center overflow-x-auto [&>div]:shrink-0 sm:flex-wrap sm:gap-y-2"
     >
       <div class="px-1">
         <EditorButton
diff --git a/resources/js/components/Factory/Shared/EditorButton.vue b/resources/js/components/Factory/Shared/EditorButton.vue
index 81d3fce4..46409c99 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 sm:min-h-0 sm: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 sm:bottom-1 text-xxs font-bold leading-none rounded-full"
       >{{ subLabel }}</small
     >
   </button>

From 8644f3dae8df492650f7f23a16609057c9235741 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:30:24 +0200
Subject: [PATCH 05/17] fix: keep the top of the document in view on load

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/Factory/Document/FormDocument.test.ts | 12 ++++++++----
 .../js/components/Factory/Document/FormDocument.vue  |  4 ++--
 .../js/components/Factory/Document/blockFocus.ts     |  9 ++++++---
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index d04ceae5..072f8a9f 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -20,8 +20,11 @@ const scrolled = vi.fn();
 
 describe("the form document", () => {
     beforeEach(() => {
-        Element.prototype.scrollIntoView = function (this: Element) {
-            scrolled(this.id);
+        Element.prototype.scrollIntoView = function (
+            this: Element,
+            options?: boolean | ScrollIntoViewOptions,
+        ) {
+            scrolled(this.id, (options as ScrollIntoViewOptions)?.block);
         };
         scrolled.mockClear();
         useForm().$reset();
@@ -42,7 +45,8 @@ describe("the form document", () => {
         await wrapper.setProps({ status: "loaded" });
         await wrapper.vm.$nextTick();
 
-        expect(scrolled).toHaveBeenCalledWith("row-b2");
+        // 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 () => {
@@ -57,6 +61,6 @@ describe("the form document", () => {
         await flushPromises();
 
         expect(useWorkbench().putOnWorkbench).toHaveBeenCalledWith(blocks[1]);
-        expect(scrolled).toHaveBeenCalledWith("row-b2");
+        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 bfdc9a76..f7b2eda5 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -155,12 +155,12 @@ watch(
   },
 );
 
-// a question opened by link (?block=) may sit far down
+// 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);
+      scrollToBlock(workbench.block.uuid, "nearest");
     }
   },
 );
diff --git a/resources/js/components/Factory/Document/blockFocus.ts b/resources/js/components/Factory/Document/blockFocus.ts
index c2cf383f..f635378b 100644
--- a/resources/js/components/Factory/Document/blockFocus.ts
+++ b/resources/js/components/Factory/Document/blockFocus.ts
@@ -22,10 +22,13 @@ export async function focusBlock(block: FormBlockModel | null): Promise<boolean>
     return name !== null;
 }
 
-// brings a question or group to the top of the document
-export async function scrollToBlock(uuid: string) {
+// 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: "start" });
+    document.getElementById(`row-${uuid}`)?.scrollIntoView({ block });
 }
 
 // a new block opens with the cursor in it

From 1949324b27458086778bf10ec178688b71f6294e Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:42:29 +0200
Subject: [PATCH 06/17] fix: hide the group grip on phones, like the question
 grip

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/DocumentGroup.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 4e0237eb..16d7bfba 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -6,12 +6,12 @@
     :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>

From c0d4a20430891e6664c04949aea90bcf8d492033 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:49:45 +0200
Subject: [PATCH 07/17] fix: keep 44 px targets up to 1024 px, and 44 px menu
 items

Phone sizes now hold below lg (Greetje's rule), not only below sm.
The number gutter is 32 px on phones, so the card gets 16 px back.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/BlockMenu.vue        | 4 ++--
 resources/js/components/Factory/Document/DocumentQuestion.vue | 2 +-
 resources/js/components/Factory/Document/FormDocument.vue     | 4 ++--
 resources/js/components/Factory/Document/QuestionCard.vue     | 4 ++--
 resources/js/components/Factory/Shared/EditorButton.vue       | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/Factory/Document/BlockMenu.vue b/resources/js/components/Factory/Document/BlockMenu.vue
index 2805dfd8..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-11 w-11 place-items-center rounded-md border border-grey-300 sm:h-9 sm:w-9 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/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 89b77fae..600974de 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -1,6 +1,6 @@
 <template>
   <div :id="`row-${block.uuid}`" class="group/question flex scroll-mt-4 items-start">
-    <div class="flex w-12 shrink-0 flex-col items-end gap-1 pr-2 pt-3">
+    <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"
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index f7b2eda5..2fa31f3c 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -50,7 +50,7 @@
         <div ref="addButtons" class="mt-4 flex flex-wrap gap-2 pl-12">
           <D9Button
             label="Add question"
-            class="min-h-11 sm:min-h-0"
+            class="min-h-11 lg:min-h-0"
             color="dark"
             icon="plus"
             icon-position="left"
@@ -58,7 +58,7 @@
           />
           <D9Button
             label="Add group"
-            class="min-h-11 sm:min-h-0"
+            class="min-h-11 lg:min-h-0"
             color="light"
             icon="layer-group"
             icon-position="left"
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index cf41f26e..67adbb44 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -45,7 +45,7 @@
       <div class="ml-auto flex items-center gap-1">
         <button
           type="button"
-          class="flex h-11 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 sm:h-9 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"
@@ -60,7 +60,7 @@
         </button>
         <button
           type="button"
-          class="flex h-11 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 sm:h-9 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"
diff --git a/resources/js/components/Factory/Shared/EditorButton.vue b/resources/js/components/Factory/Shared/EditorButton.vue
index 46409c99..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 min-h-11 min-w-11 sm:min-h-0 sm:min-w-0',
+      '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-3 sm: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>

From 2c535109d530bbb61fde81d5cfa0214f73a95d26 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:06:57 +0200
Subject: [PATCH 08/17] fix: 44 px fields with 16 px text in the question card
 below 1024 px

One CSS rule on the card and the phone's settings sheet: fields and the
answer type 44 px tall with 16 px text (iOS zooms into smaller text),
44 px tap areas on switches and file type checkboxes. Group name and
group Rules 44 px, Rating's "Use default" 44 px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/css/_touch-fields.css               | 33 +++++++++++++++++++
 resources/css/app.css                         |  1 +
 .../Factory/Document/DocumentGroup.vue        |  4 +--
 .../Factory/Document/QuestionCard.vue         |  4 +--
 .../components/Factory/Main/ConfigureFile.vue |  6 +++-
 .../Factory/Main/ConfigureRange.vue           |  6 +++-
 6 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 resources/css/_touch-fields.css

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/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 16d7bfba..715801ff 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -25,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/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index 67adbb44..3a499a66 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
@@ -90,7 +90,7 @@
     >
       <div class="fixed inset-0 bg-grey-900/40" aria-hidden="true" />
       <DialogPanel
-        class="fixed inset-x-0 bottom-0 flex h-[70%] flex-col rounded-t-2xl bg-white shadow-xl"
+        class="touch-fields fixed inset-x-0 bottom-0 flex h-[70%] flex-col rounded-t-2xl bg-white shadow-xl"
       >
         <span
           aria-hidden="true"
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>

From a9368ce475d8e5cf9b41bcfa5f6dfd26927938ba Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:06:57 +0200
Subject: [PATCH 09/17] fix: show a blue bar while the question text has focus

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Shared/Editor.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Shared/Editor.vue b/resources/js/components/Factory/Shared/Editor.vue
index 892e2335..e0660f38 100644
--- a/resources/js/components/Factory/Shared/Editor.vue
+++ b/resources/js/components/Factory/Shared/Editor.vue
@@ -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` } : {}),
     },

From d7d794f84061fe61a802131003cbdb126315b403 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:06:57 +0200
Subject: [PATCH 10/17] fix: add a policy with a dashed row, like Add choice

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Main/ConfigureConsents.vue        | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

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";

From b516020dbfce1c4bca357d66ff16788f29b041eb Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:06:57 +0200
Subject: [PATCH 11/17] fix: size the app to the visible screen on iPhone
 Safari (100dvh)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Layouts/AppLayout.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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>

From bc697189a7c6340888cf64f7ae3489068190c4ac Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:12:06 +0200
Subject: [PATCH 12/17] fix: keep the Outline button 44 px below 1024 px

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/FormDocument.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 2fa31f3c..db5f6564 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -30,7 +30,7 @@
           <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 sm:h-8 lg:absolute lg:left-4 lg:top-3 lg:z-10 xl:hidden"
+            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:left-4 lg:top-3 lg:z-10 lg:h-8 xl:hidden"
             aria-haspopup="dialog"
             :aria-expanded="outlineOpen"
             @click="outlineOpen = true"

From ea36e244f94c54769d6e563fa399af99ad8b80a5 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:12:10 +0200
Subject: [PATCH 13/17] style: re-indent FormDocument's template (Prettier)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/FormDocument.vue         | 90 +++++++++----------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index db5f6564..1348e8b5 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -18,54 +18,54 @@
       <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 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:left-4 lg:top-3 lg:z-10 lg:h-8 xl:hidden"
-            aria-haspopup="dialog"
-            :aria-expanded="outlineOpen"
-            @click="outlineOpen = true"
-          >
-            <D9Icon name="list-ul" aria-hidden="true" />
-            Outline
-          </button>
+        <div v-if="status !== 'loaded'" class="pl-12">
+          <QuestionsLoadState :status="status" @retry="retry" />
         </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')"
+        <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>
-      </template>
+
+          <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>

From 62c50240defb4df7f92b05b750ee13c92c8f3bad Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:12:23 +0200
Subject: [PATCH 14/17] style: wrap a long line in DocumentQuestion (Prettier)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Document/DocumentQuestion.vue      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 600974de..70333659 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :id="`row-${block.uuid}`" class="group/question flex scroll-mt-4 items-start">
+  <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"

From 3945f4cf35d3a5666331c2192eefdeb9f7ed9e25 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:12:52 +0200
Subject: [PATCH 15/17] docs: add the outline and phone Settings to the
 changelog line (#272)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c3bb6e06..1ba371a3 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)
 
 ### Fixed
 

From ecc9d3aa5b5b9f092a67376b750c9f3ff3553be2 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:25:24 +0200
Subject: [PATCH 16/17] fix: 44 px outline rows and Close below 1024, drop the
 sheet's drag handle

The outline panel's rows and Close were 32 px on phones and tablets. The
phone Settings sheet showed a handle that couldn't be dragged; Done and
the scrim close it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Document/DocumentOutline.vue      | 4 ++--
 resources/js/components/Factory/Document/FormDocument.vue   | 2 +-
 resources/js/components/Factory/Document/QuestionCard.vue   | 6 +-----
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentOutline.vue b/resources/js/components/Factory/Document/DocumentOutline.vue
index 7adedab8..693fa1bf 100644
--- a/resources/js/components/Factory/Document/DocumentOutline.vue
+++ b/resources/js/components/Factory/Document/DocumentOutline.vue
@@ -1,6 +1,6 @@
 <template>
   <nav :aria-labelledby="`${id}-title`" class="px-2 py-3">
-    <div class="flex h-8 items-center justify-between pl-2">
+    <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>
@@ -18,7 +18,7 @@
         <button
           v-else
           type="button"
-          class="flex h-8 w-full items-center gap-2 rounded-md pr-2 text-left text-[13px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          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)
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 1348e8b5..b9c6d3ae 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -85,7 +85,7 @@
           <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 sm:h-8 sm:w-8"
+            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" />
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index 3a499a66..4b1896e8 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -92,11 +92,7 @@
       <DialogPanel
         class="touch-fields fixed inset-x-0 bottom-0 flex h-[70%] flex-col rounded-t-2xl bg-white shadow-xl"
       >
-        <span
-          aria-hidden="true"
-          class="mx-auto mt-2 h-1 w-9 shrink-0 rounded-full bg-grey-300"
-        />
-        <div class="flex shrink-0 items-center justify-between pl-4 pr-1">
+        <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>

From 711992ef9bf7e6e26252cd4b3bdc9f465c97e115 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:30:51 +0200
Subject: [PATCH 17/17] fix: give focus back to Settings when the phone sheet
 closes

Done and Esc left focus on the hidden sheet, so it fell to the page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/QuestionCard.test.ts     | 20 +++++++++++++++++++
 .../Factory/Document/QuestionCard.vue         | 12 ++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/QuestionCard.test.ts b/resources/js/components/Factory/Document/QuestionCard.test.ts
index 5858d483..66914e25 100644
--- a/resources/js/components/Factory/Document/QuestionCard.test.ts
+++ b/resources/js/components/Factory/Document/QuestionCard.test.ts
@@ -130,5 +130,25 @@ describe("an open question", () => {
             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 4b1896e8..a81c38ef 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -44,6 +44,7 @@
 
       <div class="ml-auto flex items-center gap-1">
         <button
+          ref="settingsButton"
           type="button"
           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"
@@ -118,7 +119,7 @@
 </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";
@@ -153,6 +154,15 @@ 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 }));