From d4fc15d664bebf7b2ac08cb77f73f23f35d502d0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:55:28 +0200
Subject: [PATCH 1/7] feat: draw a line where each question starts and give the
 open one room

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/AddQuestionLine.vue      |  2 +-
 .../Factory/Document/DocumentList.test.ts     | 45 +++++++++++++++++++
 .../Factory/Document/DocumentList.vue         | 21 ++++++++-
 3 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Document/AddQuestionLine.vue b/resources/js/components/Factory/Document/AddQuestionLine.vue
index c7c3294d..19702b2b 100644
--- a/resources/js/components/Factory/Document/AddQuestionLine.vue
+++ b/resources/js/components/Factory/Document/AddQuestionLine.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- sits in the gap below a block; it shows on hover and keyboard focus, not on touch -->
   <div
-    class="group/add absolute -bottom-1 left-8 right-0 z-10 flex h-4 items-center justify-center sm:left-12 [@media(hover:none)]:hidden"
+    class="group/add absolute -bottom-2 left-8 right-0 z-10 flex h-4 items-center justify-center sm:left-12 [@media(hover:none)]:hidden"
   >
     <span
       aria-hidden="true"
diff --git a/resources/js/components/Factory/Document/DocumentList.test.ts b/resources/js/components/Factory/Document/DocumentList.test.ts
index 56b1f1c4..b54afbc4 100644
--- a/resources/js/components/Factory/Document/DocumentList.test.ts
+++ b/resources/js/components/Factory/Document/DocumentList.test.ts
@@ -67,3 +67,48 @@ describe("adding a question inside the document", () => {
         );
     });
 });
+
+describe("lines and air between blocks", () => {
+    const group = { id: 4, uuid: "g1", type: "group" } as FormBlockModel;
+
+    // the box around each block, in document order
+    const items = (list: FormBlockModel[]) => {
+        useForm().blocks = list;
+        wrapper = mount(DocumentList, {
+            props: { numbers: { b1: 1, b2: 2, b3: 3 } },
+            global: { stubs: { QuestionCard: true, DocumentGroup: true } },
+        });
+        return wrapper.findAll(".smooth-dnd-draggable-wrapper > div.relative");
+    };
+
+    beforeEach(() => {
+        useForm().$reset();
+        useWorkbench().$reset();
+    });
+
+    afterEach(() => wrapper?.unmount());
+
+    it("draws a line at the start of each question but the first, not next to a group", () => {
+        const lines = items([blocks[0], group, blocks[1], blocks[2]]).map(
+            (item) => item.classes("border-t"),
+        );
+
+        expect(lines).toEqual([false, false, false, true]);
+    });
+
+    it("gives the open question 24 px above and below, the others 8 px", () => {
+        useWorkbench().block = blocks[1];
+
+        const padding = items(blocks).map((item) =>
+            ["py-2", "py-6"].filter((name) => item.classes(name)),
+        );
+
+        expect(padding).toEqual([["py-2"], ["py-6"], ["py-2"]]);
+    });
+
+    it("keeps an open group at 8 px, so its frame doesn't move", () => {
+        useWorkbench().block = group;
+
+        expect(items([blocks[0], group])[1].classes()).toContain("py-2");
+    });
+});
diff --git a/resources/js/components/Factory/Document/DocumentList.vue b/resources/js/components/Factory/Document/DocumentList.vue
index ab8b7cfb..7badaf65 100644
--- a/resources/js/components/Factory/Document/DocumentList.vue
+++ b/resources/js/components/Factory/Document/DocumentList.vue
@@ -15,7 +15,7 @@
     @drop="onDrop"
   >
     <Draggable v-for="(block, index) in blocks" :key="block.uuid">
-      <div class="relative pb-2">
+      <div class="relative" :class="itemClass(block, index)">
         <DocumentGroup
           v-if="block.type === 'group'"
           :group="block"
@@ -48,7 +48,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { Container, Draggable } from "vue3-smooth-dnd";
-import { useForm } from "@/stores";
+import { useForm, useWorkbench } from "@/stores";
 import DocumentGroup from "./DocumentGroup.vue";
 import DocumentQuestion from "./DocumentQuestion.vue";
 import AddQuestionLine from "./AddQuestionLine.vue";
@@ -62,6 +62,7 @@ const props = defineProps<{
 }>();
 
 const store = useForm();
+const workbench = useWorkbench();
 const { addQuestion } = useAddQuestion();
 
 const blocks = computed(() =>
@@ -70,6 +71,22 @@ const blocks = computed(() =>
   ),
 );
 
+// a line where each question starts, but not against a group's own frame;
+// the open question gets 24 px of air, an open group stays put
+const itemClass = (block: FormBlockModel, index: number) => {
+  const before = blocks.value[index - 1];
+
+  return [
+    block.type !== "group" && workbench.block?.id === block.id
+      ? "py-6"
+      : "py-2",
+    before &&
+      block.type !== "group" &&
+      before.type !== "group" &&
+      "border-t border-grey-200",
+  ];
+};
+
 const getChildPayload = (index: number) => blocks.value[index];
 
 const shouldAcceptDrop = (source: any, payload?: FormBlockModel) => {

From 61ac0d945857e244bbe730ee2dc3e979a181f842 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:55:53 +0200
Subject: [PATCH 2/7] feat: make the question number the anchor under its line

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

diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 1f4af57b..6e3eba73 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -7,7 +7,7 @@
     <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"
+        class="flex h-6 items-center text-sm font-semibold tabular-nums text-grey-700"
         ><span
           :class="
             isJumpTarget &&

From 205ca06ac5c19f4225f02e6f15466c5dda9a45ee Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:55:53 +0200
Subject: [PATCH 3/7] feat: lift the open question and end screen card with a
 bigger shadow

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

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index f56e3cc9..5369210c 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -22,7 +22,7 @@
 
     <div
       v-else-if="isOpen"
-      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"
+      class="touch-fields min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-md ring-1 ring-blue-500 sm:p-4"
       @focusout="leave"
     >
       <div class="flex items-center gap-3">
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index c99dc8b1..c3ba4aa0 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    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"
+    class="touch-fields min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-md ring-1 ring-blue-500 sm:p-4"
   >
     <span :id="`${id}-text-label`" class="sr-only"
       >Question {{ number }} text</span

From d28d4b8da23b2a6c86651d3667369f0a6e9a5cc8 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:55:53 +0200
Subject: [PATCH 4/7] feat: give the document a 16 px side margin on phones and
 keep a group's name whole

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

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index ce351b3a..ce170b8f 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -26,7 +26,7 @@
         type="text"
         placeholder="e.g. About you"
         title="Use a group to show or hide several questions with one rule."
-        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"
+        class="h-11 min-w-40 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"
         >Always hidden</span
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 59986442..09dde153 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -16,7 +16,7 @@
       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"
+        class="mx-auto w-full max-w-[720px] px-4 pb-40 pt-6 sm:px-6 sm:pt-10"
       >
         <div v-if="status !== 'loaded'" class="pl-12">
           <QuestionsLoadState :status="status" @retry="retry" />

From d6949dd74615e071a7f8202e2440c4be32b935f0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:59:36 +0200
Subject: [PATCH 5/7] docs: add changelog line for #281

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3d7a49b5..e01619cc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   Each rule now shows as a sentence under its question, and a group says when it's hidden. Edit changes a rule right there, and for choices, ratings and scales you pick the answer instead of typing it. A rule whose question was deleted shows in red and can't be saved until you fix it. (#274)
 -   The form editor uses plain words: a question's settings are headed by its answer type, like Choices or Rating, "Identifier" is now "Short name", and every switch shows on or off. Settings name what they do, like "Lowest value", "Shuffle choices" and "None ticked: all types allowed." on file uploads. (#279)
 -   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Its button opens in a new tab there, so you stay in the editor. Settings now calls the Completion Page "End screen", like the editor. (#280)
+-   In the form editor a thin line marks where each question starts, its number stands out more, and the question you edit gets more room around it. On a phone the editor keeps a wider margin at the sides. (#281)
 
 ### Fixed
 

From a945952f131c41a983280c8c9337d4f9c55a4cf5 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:09:19 +0200
Subject: [PATCH 6/7] fix: start the end screen with a line and give it room
 when open

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/EndScreenBlock.test.ts   |  8 ++++++
 .../Factory/Document/EndScreenBlock.vue       |  6 ++++-
 .../Factory/Document/FormDocument.test.ts     | 26 +++++++++++++++++++
 .../Factory/Document/FormDocument.vue         |  9 ++++++-
 4 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 279e4262..37fa5bf7 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -131,6 +131,14 @@ describe("the end screen in the document", () => {
         expect(endScreenOpen.value).toBe(false);
     });
 
+    it("gets 24 px above and below when open, like an open question", async () => {
+        expect(mountBlock().get("#row-end-screen").classes()).toContain("pt-2");
+
+        const row = (await open()).get("#row-end-screen");
+        expect(row.classes()).toContain("py-6");
+        expect(row.classes()).not.toContain("pt-2");
+    });
+
     it("has the question card's phone sizes, number column and focus bar", async () => {
         const block = await open();
         const [number, card] = block.findAll("#row-end-screen > div");
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index 77533967..499e712c 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -1,5 +1,9 @@
 <template>
-  <div id="row-end-screen" class="relative flex items-start">
+  <div
+    id="row-end-screen"
+    class="relative flex items-start"
+    :class="isOpen ? 'py-6' : 'pt-2'"
+  >
     <div class="flex w-8 shrink-0 justify-end pr-2 pt-3 sm:w-12">
       <span class="flex h-6 items-center text-grey-500">
         <D9Icon name="flag" aria-hidden="true" />
diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index 58fe4ff6..27250350 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -218,4 +218,30 @@ describe("the form document", () => {
         expect(text.indexOf(first)).toBeGreaterThan(-1);
         expect(text.indexOf("[end]")).toBeGreaterThan(text.indexOf(first));
     });
+
+    it("starts the end screen with a line, but not against a group's frame", () => {
+        const group = { id: 3, uuid: "g1", type: "group" } as FormBlockModel;
+        const inGroup = {
+            id: 4,
+            uuid: "b4",
+            type: "none",
+            parent_block: "g1",
+        } as FormBlockModel;
+        const line = (list: FormBlockModel[]) => {
+            wrapper?.unmount();
+            useForm().blocks = list;
+            wrapper = mount(FormDocument, {
+                props: { status: "loaded" },
+                global: { stubs },
+            });
+            return wrapper
+                .findAll("div")
+                .find((item) => item.text() === "[end]")!
+                .classes("border-t");
+        };
+
+        expect(line(blocks)).toBe(true);
+        expect(line([...blocks, group, inGroup])).toBe(false);
+        expect(line([])).toBe(false);
+    });
 });
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 09dde153..023babd8 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -61,7 +61,7 @@
             @pick="addQuestion"
           />
 
-          <EndScreenBlock class="mt-2" />
+          <EndScreenBlock :class="endLine && 'border-t border-grey-200'" />
 
           <div
             id="add-buttons"
@@ -220,6 +220,13 @@ const pick = async (block: FormBlockModel) => {
 
 const numbers = computed(() => questionNumbers(store.blocks ?? []));
 
+// the end screen starts with a line like a question, but not against a group's frame
+const endLine = computed(() => {
+  const top = (store.blocks ?? []).filter((block) => !block.parent_block);
+
+  return top.length > 0 && top[top.length - 1].type !== "group";
+});
+
 const countLine = computed(() => {
   const questions = Object.keys(numbers.value).length;
   const groups = (store.blocks ?? []).filter(

From b8154f7030fc27e8dc4e1c20b00568e84f911cea Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:10:58 +0200
Subject: [PATCH 7/7] fix: wrap a group's Add rule and menu together, on the
 right

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

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index ce170b8f..bd8352c5 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -31,18 +31,21 @@
       <span v-if="group.is_disabled" class="text-xs text-grey-600"
         >Always hidden</span
       >
-      <button
-        type="button"
-        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="addRule(group)"
-      >
-        Add rule
-      </button>
-      <BlockMenu
-        :block="group"
-        :label="`Options for group ${group.title || 'Group'}`"
-        @add-to-group="addQuestion"
-      />
+      <!-- one unit, so on a phone both wrap below the name, on the right -->
+      <div class="ml-auto flex items-center gap-2">
+        <button
+          type="button"
+          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="addRule(group)"
+        >
+          Add rule
+        </button>
+        <BlockMenu
+          :block="group"
+          :label="`Options for group ${group.title || 'Group'}`"
+          @add-to-group="addQuestion"
+        />
+      </div>
     </div>
     <BlockRules :block="group" :numbers="numbers" class="pb-2 pl-8" />