From ac1aef3b48a113284ffd3ebd473574d1ab2139e3 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:01:04 +0200
Subject: [PATCH 01/16] feat: show the end screen as the last block of the
 document

Headline, text and button are edited in place and saved through the
same form update as the Settings page, after a 1 s pause or when focus
leaves the block. While the form redirects, the block only names the
link and points to Settings.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/app.ts                           |   2 +
 .../Factory/Document/EndScreenBlock.test.ts   | 223 +++++++++++++++++
 .../Factory/Document/EndScreenBlock.vue       | 236 ++++++++++++++++++
 .../Factory/Document/FormDocument.test.ts     |  30 +++
 .../Factory/Document/FormDocument.vue         |   3 +
 5 files changed, 494 insertions(+)
 create mode 100644 resources/js/components/Factory/Document/EndScreenBlock.test.ts
 create mode 100644 resources/js/components/Factory/Document/EndScreenBlock.vue
 create mode 100644 resources/js/components/Factory/Document/FormDocument.test.ts

diff --git a/resources/js/app.ts b/resources/js/app.ts
index 4fcc4e6a..f84c89d7 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -36,6 +36,7 @@ import {
     faEnvelope,
     faEye,
     faEyeSlash,
+    faFlag,
     faGear,
     faGlobe,
     faGripVertical,
@@ -100,6 +101,7 @@ library.add(
     faEnvelope,
     faEye,
     faEyeSlash,
+    faFlag,
     faGear,
     faGlobe,
     faGripVertical,
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
new file mode 100644
index 00000000..686367f4
--- /dev/null
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -0,0 +1,223 @@
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { AxiosError, AxiosResponse } from "axios";
+import { createPinia, setActivePinia } from "pinia";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { callUpdateForm } from "@/api/forms";
+import { useForm, useWorkbench } from "@/stores";
+import { useNotice } from "@/stores/notice";
+import CompletionPage from "@/components/Factory/Settings/CompletionPage.vue";
+import EndScreenBlock from "./EndScreenBlock.vue";
+
+vi.mock("@/api/forms", async (importOriginal) => ({
+    ...(await importOriginal()),
+    callUpdateForm: vi.fn(),
+}));
+
+const form = {
+    uuid: "form1",
+    eoc_headline: "See you on Thursday!",
+    eoc_text: "<p>We sent your ticket to your inbox.</p>",
+    show_cta_link: true,
+    cta_label: "Add to calendar",
+    cta_link: "https://example.com/cal",
+    use_cta_redirect: false,
+} as FormModel;
+
+let pinia: ReturnType<typeof createPinia>;
+let wrapper: VueWrapper | undefined;
+
+// real actions, not the stubs of the global testing pinia
+const mountBlock = () => {
+    wrapper = mount(EndScreenBlock, {
+        attachTo: document.body,
+        global: { plugins: [pinia], directives: { tooltip: {} } },
+    });
+    return wrapper;
+};
+
+const open = async () => {
+    const block = mountBlock();
+    await block.find("button").trigger("click");
+    await vi.waitFor(() =>
+        expect(block.find("[role=textbox]").exists()).toBe(true),
+    );
+    return block;
+};
+
+describe("the end screen in the document", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        window.route = (() => "/settings") as unknown as typeof window.route;
+        pinia = createPinia();
+        setActivePinia(pinia);
+        useForm().form = { ...form };
+        // the server answers with the form as it saved it
+        vi.mocked(callUpdateForm).mockImplementation(
+            async (_, values) =>
+                ({
+                    data: { ...useForm().form, ...values },
+                }) as AxiosResponse,
+        );
+    });
+
+    afterEach(() => {
+        wrapper?.unmount();
+        wrapper = undefined;
+    });
+
+    it("shows its headline, text and button when closed", () => {
+        const text = mountBlock().find("button").text();
+
+        expect(text).toContain("See you on Thursday!");
+        expect(text).toContain("End screen");
+        expect(text).toContain("We sent your ticket to your inbox.");
+        expect(text).toContain("Button: Add to calendar");
+    });
+
+    it("says when it has no headline yet", () => {
+        useForm().form = { ...form, eoc_headline: null, show_cta_link: false };
+        const text = mountBlock().find("button").text();
+
+        expect(text).toContain("No headline yet");
+        expect(text).not.toContain("Button:");
+    });
+
+    it("opens in place, closes the open question, and closes when a question opens", async () => {
+        const workbench = useWorkbench();
+        workbench.block = { id: 4, uuid: "q4" } as FormBlockModel;
+
+        const block = await open();
+
+        expect(workbench.block).toBeNull();
+        const headline = block.find<HTMLInputElement>("#end-screen-headline");
+        expect(headline.element.value).toBe("See you on Thursday!");
+        expect(document.activeElement).toBe(headline.element);
+        expect(block.find("#end-screen-text-label").text()).toBe("Text");
+
+        workbench.block = { id: 5, uuid: "q5" } as FormBlockModel;
+        await flushPromises();
+
+        expect(block.find("#end-screen-headline").exists()).toBe(false);
+    });
+
+    it("saves only what changed, right away when you leave the block", async () => {
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        await block.find("#end-screen-headline").trigger("focusout", {
+            relatedTarget: block.find("#end-screen-button").element,
+        });
+        await flushPromises();
+        expect(callUpdateForm).not.toHaveBeenCalled();
+
+        await block.find("#end-screen-headline").trigger("focusout");
+        await flushPromises();
+
+        expect(callUpdateForm).toHaveBeenCalledTimes(1);
+        expect(callUpdateForm).toHaveBeenCalledWith(
+            expect.objectContaining({ uuid: "form1" }),
+            { eoc_headline: "Thanks!" },
+        );
+        expect(useForm().form?.eoc_headline).toBe("Thanks!");
+    });
+
+    it("saves on its own after a short pause while you type", async () => {
+        vi.useFakeTimers();
+        try {
+            const block = await open();
+
+            await block.find("#end-screen-headline").setValue("Thanks!");
+            vi.advanceTimersByTime(1000);
+            await flushPromises();
+
+            expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
+                eoc_headline: "Thanks!",
+            });
+        } finally {
+            vi.useRealTimers();
+        }
+    });
+
+    it("edits the button: off hides its label and link", async () => {
+        const block = await open();
+
+        expect(
+            block.find<HTMLInputElement>("#end-screen-button-label").element
+                .value,
+        ).toBe("Add to calendar");
+        expect(
+            block.find<HTMLInputElement>("#end-screen-button-link").element
+                .value,
+        ).toBe("https://example.com/cal");
+
+        await block.find("#end-screen-button-link").setValue("mailto:a@b.co");
+        await block.find("#end-screen-button").trigger("click");
+        await block.find("#end-screen-button").trigger("focusout");
+        await flushPromises();
+
+        expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
+            cta_link: "mailto:a@b.co",
+            show_cta_link: false,
+        });
+        expect(block.find("#end-screen-button-label").exists()).toBe(false);
+    });
+
+    it("shows the server's reason when a save is refused", async () => {
+        const refused = new AxiosError(
+            "Unprocessable",
+            undefined,
+            undefined,
+            undefined,
+            {
+                status: 422,
+                data: { message: "The cta link field format is invalid." },
+            } as AxiosResponse,
+        );
+        vi.mocked(callUpdateForm).mockRejectedValue(refused);
+        const block = await open();
+
+        await block.find("#end-screen-button-link").setValue("example.com");
+        await block.find("#end-screen-button-link").trigger("focusout");
+        await flushPromises();
+
+        expect(useNotice().message).toBe(
+            "Your change was not saved: The cta link field format is invalid.",
+        );
+        expect(useForm().form?.cta_link).toBe("https://example.com/cal");
+    });
+
+    it("only links to Settings while the form sends people to a link instead", () => {
+        useForm().form = { ...form, use_cta_redirect: true };
+        const block = mountBlock();
+
+        expect(block.find("button").exists()).toBe(false);
+        expect(block.text()).toContain("https://example.com/cal");
+        expect(block.find("a").attributes("href")).toBe(
+            "/settings#completion-page",
+        );
+    });
+
+    it("stays in step with the Settings page through the form store", async () => {
+        const block = await open();
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        await block.find("#end-screen-headline").trigger("focusout");
+        await flushPromises();
+
+        const settings = mount(CompletionPage, {
+            global: { plugins: [pinia], directives: { tooltip: {} } },
+        });
+        expect(
+            settings.find<HTMLInputElement>("#eoc-headline").element.value,
+        ).toBe("Thanks!");
+
+        await settings.find("#eoc-headline").setValue("Bye!");
+        await settings.find("form").trigger("submit");
+        await flushPromises();
+        settings.unmount();
+
+        // closed, the block shows the saved headline without a reload
+        useWorkbench().block = { id: 5, uuid: "q5" } as FormBlockModel;
+        await flushPromises();
+        expect(block.find("button").text()).toContain("Bye!");
+    });
+});
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
new file mode 100644
index 00000000..3e387953
--- /dev/null
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -0,0 +1,236 @@
+<template>
+  <div id="row-end-screen" class="flex items-start">
+    <div class="flex w-12 shrink-0 justify-end pr-2 pt-3">
+      <span class="flex h-6 items-center text-grey-500">
+        <D9Icon name="flag" aria-hidden="true" />
+      </span>
+    </div>
+
+    <!-- the public form then skips the end screen -->
+    <div
+      v-if="store.form?.use_cta_redirect"
+      class="min-h-14 min-w-0 flex-1 px-3 py-2.5 text-sm text-grey-700"
+    >
+      <p class="break-words">
+        <span class="font-medium text-grey-900">No end screen:</span>
+        people go to {{ store.form.cta_link }}
+      </p>
+      <Link :href="settingsLink" class="text-xs text-grey-600 underline"
+        >Change in Settings</Link
+      >
+    </div>
+
+    <div
+      v-else-if="isOpen"
+      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"
+      @focusout="leave"
+    >
+      <div class="flex items-center justify-between gap-3">
+        <span class="rounded bg-grey-100 px-1.5 text-xs leading-5 text-grey-700"
+          >End screen</span
+        >
+        <Link
+          :href="settingsLink"
+          class="text-xs text-grey-600 underline hover:text-grey-900"
+          >Also in Settings</Link
+        >
+      </div>
+
+      <div>
+        <D9Label id="end-screen-headline" label="Headline" />
+        <D9Input
+          id="end-screen-headline"
+          v-model="draft.eoc_headline"
+          type="text"
+          block
+        />
+      </div>
+
+      <div>
+        <D9Label
+          id="end-screen-text"
+          label="Text"
+          @click="textEditor?.focus()"
+        />
+        <Editor
+          id="end-screen-text"
+          ref="textEditor"
+          v-model="draft.eoc_text"
+        />
+      </div>
+
+      <div class="space-y-3 border-t border-grey-200 pt-3">
+        <div class="flex items-center gap-2">
+          <label for="end-screen-button" class="text-sm text-grey-700">
+            Button
+          </label>
+          <D9Switch
+            id="end-screen-button"
+            v-model="draft.show_cta_link"
+            label="Button"
+            onLabel="Yes"
+            offLabel="No"
+          />
+        </div>
+        <div v-if="draft.show_cta_link" class="grid gap-3 sm:grid-cols-2">
+          <div>
+            <D9Label id="end-screen-button-label" label="Label" />
+            <D9Input
+              id="end-screen-button-label"
+              v-model="draft.cta_label"
+              type="text"
+              block
+            />
+          </div>
+          <div>
+            <D9Label id="end-screen-button-link" label="Link" />
+            <D9Input
+              id="end-screen-button-link"
+              v-model="draft.cta_link"
+              type="url"
+              block
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <button
+      v-else
+      type="button"
+      class="min-h-14 min-w-0 flex-1 rounded-lg px-3 py-2.5 text-left hover:bg-grey-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      @click="open"
+    >
+      <span class="flex items-start gap-2">
+        <span
+          dir="auto"
+          class="line-clamp-2 min-w-0 flex-1 break-words text-base"
+          :class="
+            store.form?.eoc_headline
+              ? 'font-medium text-grey-900'
+              : 'font-normal italic text-grey-600'
+          "
+          ><span class="sr-only">End screen:&nbsp;</span
+          >{{ store.form?.eoc_headline || "No headline yet" }}</span
+        >
+        <span
+          aria-hidden="true"
+          class="shrink-0 rounded bg-grey-100 px-1.5 text-xs leading-5 text-grey-700"
+          >End screen</span
+        >
+      </span>
+      <span
+        v-if="text"
+        dir="auto"
+        class="mt-1 line-clamp-2 break-words text-sm text-grey-700"
+        >{{ text }}</span
+      >
+      <span v-if="hasButton" class="mt-1 block text-xs text-grey-600"
+        >Button: {{ store.form?.cta_label || "Close" }}</span
+      >
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from "vue";
+import { Link } from "@inertiajs/vue3";
+import { D9Icon, D9Input, D9Label, D9Switch } from "@deck9/ui";
+import debounce from "lodash/debounce";
+import { useForm, useWorkbench } from "@/stores";
+import { useNotice } from "@/stores/notice";
+import Editor from "@/components/Factory/Shared/Editor.vue";
+import { plainText } from "./questionSummary";
+
+const store = useForm();
+const workbench = useWorkbench();
+const notice = useNotice();
+
+const isOpen = ref(false);
+const textEditor = ref<InstanceType<typeof Editor> | null>(null);
+
+const settingsLink = computed(
+  () =>
+    `${window.route("forms.settings", { uuid: store.form?.uuid })}#completion-page`,
+);
+const text = computed(() => plainText(store.form?.eoc_text ?? null));
+// the public form shows the button only with a link
+const hasButton = computed(
+  () => store.form?.show_cta_link && store.form?.cta_link,
+);
+
+const fields = [
+  "eoc_headline",
+  "eoc_text",
+  "show_cta_link",
+  "cta_label",
+  "cta_link",
+] as const;
+
+const saved = () => ({
+  eoc_headline: store.form?.eoc_headline ?? "",
+  eoc_text: store.form?.eoc_text ?? "",
+  show_cta_link: store.form?.show_cta_link ?? false,
+  cta_label: store.form?.cta_label ?? "",
+  cta_link: store.form?.cta_link ?? "",
+});
+
+const draft = reactive(saved());
+
+// sends what differs from the saved form, so a refused value is sent again until it's fixed
+const save = debounce(async () => {
+  const before = saved();
+  const changes = Object.fromEntries(
+    fields
+      .filter((key) => draft[key] !== before[key])
+      .map((key) => [key, draft[key]]),
+  );
+
+  if (!Object.keys(changes).length) {
+    return;
+  }
+
+  try {
+    await store.updateForm(changes);
+    notice.clearSaveError("saveEndScreen");
+  } catch (error) {
+    notice.showSaveError(error, "saveEndScreen");
+  }
+}, 1000);
+
+watch(draft, () => save());
+
+// save before a click on a link can load the next page
+const leave = (event: FocusEvent) => {
+  const card = event.currentTarget as HTMLElement;
+
+  if (!card.contains(event.relatedTarget as Node | null)) {
+    save.flush();
+  }
+};
+
+const open = async () => {
+  workbench.clearWorkbench();
+  // a change made before it closed may still be on its way
+  await save.flush();
+  Object.assign(draft, saved());
+  isOpen.value = true;
+
+  await nextTick();
+  document.getElementById("end-screen-headline")?.focus();
+};
+
+// one card is open at a time
+watch(
+  () => workbench.block,
+  (block) => {
+    if (block) {
+      save.flush();
+      isOpen.value = false;
+    }
+  },
+);
+
+// the page cleared the form before this unmounts: a later save would go to the next page's form
+onBeforeUnmount(() => save.cancel());
+</script>
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..e6fb0289
--- /dev/null
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -0,0 +1,30 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import { useForm } from "@/stores";
+import FormDocument from "./FormDocument.vue";
+
+const mountDocument = () =>
+    mount(FormDocument, {
+        props: { status: "loaded" },
+        global: {
+            stubs: {
+                DocumentList: { template: "<div>questions</div>" },
+                EmptyState: { template: "<div>no questions</div>" },
+                EndScreenBlock: { template: "<div>end screen</div>" },
+                BlockLogicEditor: true,
+            },
+        },
+    });
+
+describe("the form document", () => {
+    it.each([
+        ["questions", [{ uuid: "q1", type: "input-short" }]],
+        ["no questions", []],
+    ])("shows the end screen after %s", (first, blocks) => {
+        useForm().blocks = blocks as FormBlockModel[];
+        const text = mountDocument().text();
+
+        expect(text.indexOf(first)).toBeGreaterThan(-1);
+        expect(text.indexOf("end screen")).toBeGreaterThan(text.indexOf(first));
+    });
+});
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 58ac1ce4..f5d7752b 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -22,6 +22,8 @@
           description="Add your first question below."
         />
 
+        <EndScreenBlock class="mt-2" />
+
         <div ref="addButtons" class="mt-4 flex flex-wrap gap-2 pl-12">
           <D9Button
             label="Add question"
@@ -52,6 +54,7 @@ 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 EndScreenBlock from "./EndScreenBlock.vue";
 import { questionNumbers } from "./questionSummary";
 import { focusBlock, useAddBlock } from "./blockFocus";
 

From ec80e90c816fe8782104d1b652c25b3ad2f8d5f4 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:03:04 +0200
Subject: [PATCH 02/16] docs: add the end screen block to the changelog

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 c3bb6e06..82c2ee3a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   The API can copy a question (`POST /api/blocks/{block}/duplicate`) with its text, settings, answers and Required, but not its rules. The copy goes right after the original. (#262)
 -   The form's team can try a form in preview mode, also while it's a draft. Answers in preview mode are never stored or counted and send no webhooks or emails. (#266)
 -   Add `?preview=1` to your form's link to try it as a member of its team. Nothing is stored, files aren't uploaded and the form doesn't redirect at the end. (#270)
+-   The form editor shows the end screen as the last block of your form. You can edit its headline, text and button right there, and the Completion Page in Settings shows the same values. (#271)
 
 ### Changed
 

From 32143ee4a3f487789bea2311196494af51c45f15 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:09:59 +0200
Subject: [PATCH 03/16] fix: load the form again when browser Back returns to
 Settings

Back restored the old props from history, so the tabs showed values from
before an edit in the document, and Save there undid that edit.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Settings.test.ts | 80 +++++++++++++++++++++++
 resources/js/Pages/Forms/Settings.vue     | 24 +++++++
 2 files changed, 104 insertions(+)
 create mode 100644 resources/js/Pages/Forms/Settings.test.ts

diff --git a/resources/js/Pages/Forms/Settings.test.ts b/resources/js/Pages/Forms/Settings.test.ts
new file mode 100644
index 00000000..59b96310
--- /dev/null
+++ b/resources/js/Pages/Forms/Settings.test.ts
@@ -0,0 +1,80 @@
+import { mount, VueWrapper } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { router } from "@inertiajs/vue3";
+import Settings from "./Settings.vue";
+
+vi.mock("@inertiajs/vue3", async (importOriginal) => ({
+    ...(await importOriginal<typeof import("@inertiajs/vue3")>()),
+    router: { on: vi.fn(), visit: vi.fn() },
+}));
+// its code highlighter needs a global Vue
+vi.mock("@/components/Factory/Settings/Embed.vue", () => ({
+    default: { name: "Embed", template: "<div />" },
+}));
+
+const form = { uuid: "form1", name: "Customer feedback" } as FormModel;
+// Settings listens for Inertia visits once, when it loads
+const [listensTo, onVisit] = vi.mocked(router.on).mock.calls[0] ?? [];
+
+const stubs = {
+    AppLayout: { props: ["title"], template: "<main><slot /></main>" },
+    Options: true,
+    Privacy: true,
+    CompletionPage: true,
+    Appearance: true,
+    Embed: true,
+    TemplateExport: true,
+    Delete: true,
+};
+
+let wrapper: VueWrapper | undefined;
+
+const mountSettings = () => {
+    wrapper = mount(Settings, { props: { form }, global: { stubs } });
+};
+
+describe("settings page from history", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    afterEach(() => {
+        wrapper?.unmount();
+        wrapper = undefined;
+    });
+
+    it("loads the form again when browser Back brings the page back", () => {
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+
+        mountSettings();
+
+        expect(router.visit).toHaveBeenCalledWith(window.location.href, {
+            only: ["form"],
+            replace: true,
+            preserveScroll: true,
+        });
+    });
+
+    it("loads nothing more on a normal visit, also one after a Back", () => {
+        // a Back to another page, then a link to Settings
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+        expect(listensTo).toBe("before");
+        onVisit(new CustomEvent("inertia:before"));
+
+        mountSettings();
+
+        expect(router.visit).not.toHaveBeenCalled();
+    });
+
+    it("loads nothing more when only the tab in the address changes", () => {
+        window.dispatchEvent(new PopStateEvent("popstate", { state: null }));
+
+        mountSettings();
+
+        expect(router.visit).not.toHaveBeenCalled();
+    });
+});
diff --git a/resources/js/Pages/Forms/Settings.vue b/resources/js/Pages/Forms/Settings.vue
index c0ac0705..9649392a 100644
--- a/resources/js/Pages/Forms/Settings.vue
+++ b/resources/js/Pages/Forms/Settings.vue
@@ -61,6 +61,20 @@
   </app-layout>
 </template>
 
+<script lang="ts">
+import { router } from "@inertiajs/vue3";
+
+// browser Back and Forward show a page with its old props from history; a tab
+// change in the address has no state and keeps the page
+let fromHistory = false;
+window.addEventListener("popstate", (event) => {
+  fromHistory = event.state !== null;
+});
+router.on("before", () => {
+  fromHistory = false;
+});
+</script>
+
 <script setup lang="ts">
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
@@ -121,6 +135,16 @@ if (foundIndex !== -1) {
   tabChanged(0);
 }
 
+// load the form again, so the tabs show changes made in the editor
+if (fromHistory) {
+  fromHistory = false;
+  router.visit(location.href, {
+    only: ["form"],
+    replace: true,
+    preserveScroll: true,
+  });
+}
+
 onBeforeUnmount(() => {
   store.clearForm();
 });

From ab059624d2f233a70c2417c4a9498e7e55349ad3 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:10:22 +0200
Subject: [PATCH 04/16] fix: save the end screen when its Settings link or
 browser Back leaves the page

A click on the link inside the card kept the focus in the card, and Back
moves no focus, so a change typed in the last second was lost.

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

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 686367f4..19875d57 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -121,6 +121,32 @@ describe("the end screen in the document", () => {
         expect(useForm().form?.eoc_headline).toBe("Thanks!");
     });
 
+    it("saves right away when the focus moves to the Settings link in the block", async () => {
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        await block.find("#end-screen-headline").trigger("focusout", {
+            relatedTarget: block.find("a").element,
+        });
+        await flushPromises();
+
+        expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
+            eoc_headline: "Thanks!",
+        });
+    });
+
+    it("saves right away on browser Back", async () => {
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        window.dispatchEvent(new PopStateEvent("popstate"));
+        await flushPromises();
+
+        expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
+            eoc_headline: "Thanks!",
+        });
+    });
+
     it("saves on its own after a short pause while you type", async () => {
         vi.useFakeTimers();
         try {
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index 3e387953..ba39559b 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -136,6 +136,7 @@
 import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from "vue";
 import { Link } from "@inertiajs/vue3";
 import { D9Icon, D9Input, D9Label, D9Switch } from "@deck9/ui";
+import { useEventListener } from "@vueuse/core";
 import debounce from "lodash/debounce";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
@@ -200,15 +201,19 @@ const save = debounce(async () => {
 
 watch(draft, () => save());
 
-// save before a click on a link can load the next page
+// save before a click on a link can load the next page, also "Also in Settings" in the card
 const leave = (event: FocusEvent) => {
   const card = event.currentTarget as HTMLElement;
+  const next = event.relatedTarget as HTMLElement | null;
 
-  if (!card.contains(event.relatedTarget as Node | null)) {
+  if (!card.contains(next) || next?.closest("a")) {
     save.flush();
   }
 };
 
+// browser Back moves no focus; the old page stays until the next one has loaded
+useEventListener(window, "popstate", () => save.flush());
+
 const open = async () => {
   workbench.clearWorkbench();
   // a change made before it closed may still be on its way

From c6a8d88b89609984276b1c9932318659014bf76d Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:12:18 +0200
Subject: [PATCH 05/16] style: make the open end screen card flat like a
 question card

Bare headline with the chip on its right, bare text, hidden labels for
screen readers, "Also in Settings" next to the Button switch. The button
fields say "Button text" and show "Close" and "https://" when empty.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/EndScreenBlock.test.ts   | 13 ++++-
 .../Factory/Document/EndScreenBlock.vue       | 51 +++++++++----------
 2 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 19875d57..cf03cd93 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -92,7 +92,12 @@ describe("the end screen in the document", () => {
         const headline = block.find<HTMLInputElement>("#end-screen-headline");
         expect(headline.element.value).toBe("See you on Thursday!");
         expect(document.activeElement).toBe(headline.element);
-        expect(block.find("#end-screen-text-label").text()).toBe("Text");
+        expect(block.find("label[for=end-screen-headline]").text()).toBe(
+            "End screen headline",
+        );
+        expect(block.find("#end-screen-text-label").text()).toBe(
+            "End screen text",
+        );
 
         workbench.block = { id: 5, uuid: "q5" } as FormBlockModel;
         await flushPromises();
@@ -164,9 +169,13 @@ describe("the end screen in the document", () => {
         }
     });
 
-    it("edits the button: off hides its label and link", async () => {
+    it("edits the button: off hides its text and link", async () => {
         const block = await open();
 
+        expect(block.find("#end-screen-button-label-label").text()).toBe(
+            "Button text",
+        );
+
         expect(
             block.find<HTMLInputElement>("#end-screen-button-label").element
                 .value,
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index ba39559b..e3342b7b 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -25,38 +25,29 @@
       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"
       @focusout="leave"
     >
-      <div class="flex items-center justify-between gap-3">
-        <span class="rounded bg-grey-100 px-1.5 text-xs leading-5 text-grey-700"
-          >End screen</span
-        >
-        <Link
-          :href="settingsLink"
-          class="text-xs text-grey-600 underline hover:text-grey-900"
-          >Also in Settings</Link
+      <div class="flex items-center gap-3">
+        <label for="end-screen-headline" class="sr-only"
+          >End screen headline</label
         >
-      </div>
-
-      <div>
-        <D9Label id="end-screen-headline" label="Headline" />
-        <D9Input
+        <input
           id="end-screen-headline"
           v-model="draft.eoc_headline"
           type="text"
-          block
+          dir="auto"
+          class="-ml-2 min-w-0 flex-1 border-0 border-l-2 border-transparent bg-transparent p-0 pl-1.5 text-base font-medium text-grey-900 focus:border-blue-500 focus:ring-0"
         />
+        <span
+          class="shrink-0 rounded bg-grey-100 px-1.5 text-xs leading-5 text-grey-700"
+          >End screen</span
+        >
       </div>
 
-      <div>
-        <D9Label
-          id="end-screen-text"
-          label="Text"
-          @click="textEditor?.focus()"
-        />
-        <Editor
-          id="end-screen-text"
-          ref="textEditor"
-          v-model="draft.eoc_text"
-        />
+      <!-- the same focus sign as the headline -->
+      <div
+        class="-ml-2 border-l-2 border-transparent pl-1.5 focus-within:border-blue-500"
+      >
+        <span id="end-screen-text-label" class="sr-only">End screen text</span>
+        <Editor id="end-screen-text" v-model="draft.eoc_text" bare />
       </div>
 
       <div class="space-y-3 border-t border-grey-200 pt-3">
@@ -71,14 +62,20 @@
             onLabel="Yes"
             offLabel="No"
           />
+          <Link
+            :href="settingsLink"
+            class="ml-auto text-xs text-grey-600 underline hover:text-grey-900"
+            >Also in Settings</Link
+          >
         </div>
         <div v-if="draft.show_cta_link" class="grid gap-3 sm:grid-cols-2">
           <div>
-            <D9Label id="end-screen-button-label" label="Label" />
+            <D9Label id="end-screen-button-label" label="Button text" />
             <D9Input
               id="end-screen-button-label"
               v-model="draft.cta_label"
               type="text"
+              placeholder="Close"
               block
             />
           </div>
@@ -88,6 +85,7 @@
               id="end-screen-button-link"
               v-model="draft.cta_link"
               type="url"
+              placeholder="https://"
               block
             />
           </div>
@@ -148,7 +146,6 @@ const workbench = useWorkbench();
 const notice = useNotice();
 
 const isOpen = ref(false);
-const textEditor = ref<InstanceType<typeof Editor> | null>(null);
 
 const settingsLink = computed(
   () =>

From f08f890998af21403bbad68e5a777e0be34deaab Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:12:28 +0200
Subject: [PATCH 06/16] fix: show the default end screen headline people see
 when it's empty
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The block said "No headline yet", but the public form shows
"Form Submitted". It now says "Form Submitted · default", and the open
card shows it as the placeholder.

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

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index cf03cd93..39177729 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -74,12 +74,17 @@ describe("the end screen in the document", () => {
         expect(text).toContain("Button: Add to calendar");
     });
 
-    it("says when it has no headline yet", () => {
+    it("shows the default headline people see when it has none", async () => {
         useForm().form = { ...form, eoc_headline: null, show_cta_link: false };
         const text = mountBlock().find("button").text();
 
-        expect(text).toContain("No headline yet");
+        expect(text).toContain("Form Submitted · default");
         expect(text).not.toContain("Button:");
+
+        const block = await open();
+        expect(
+            block.find("#end-screen-headline").attributes("placeholder"),
+        ).toBe("Form Submitted");
     });
 
     it("opens in place, closes the open question, and closes when a question opens", async () => {
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index e3342b7b..f811ce83 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -34,7 +34,8 @@
           v-model="draft.eoc_headline"
           type="text"
           dir="auto"
-          class="-ml-2 min-w-0 flex-1 border-0 border-l-2 border-transparent bg-transparent p-0 pl-1.5 text-base font-medium text-grey-900 focus:border-blue-500 focus:ring-0"
+          placeholder="Form Submitted"
+          class="-ml-2 min-w-0 flex-1 border-0 border-l-2 border-transparent bg-transparent p-0 pl-1.5 text-base font-medium text-grey-900 placeholder:font-normal placeholder:italic placeholder:text-grey-600 focus:border-blue-500 focus:ring-0"
         />
         <span
           class="shrink-0 rounded bg-grey-100 px-1.5 text-xs leading-5 text-grey-700"
@@ -109,7 +110,7 @@
               : 'font-normal italic text-grey-600'
           "
           ><span class="sr-only">End screen:&nbsp;</span
-          >{{ store.form?.eoc_headline || "No headline yet" }}</span
+          >{{ store.form?.eoc_headline || "Form Submitted · default" }}</span
         >
         <span
           aria-hidden="true"

From dd3ac2f600badbc317e9fcb9df9ccdeed72e7b67 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:23:27 +0200
Subject: [PATCH 07/16] fix: load the form again when browser Back returns to
 the editor

Back from Settings showed the end screen from before the Settings change,
and editing it there undid that change. The Settings check moves into
useFreshFormAfterBack, used by both pages.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts       | 24 +++++++++++++++++++
 resources/js/Pages/Forms/Edit.vue           |  2 ++
 resources/js/Pages/Forms/Settings.vue       | 26 +++------------------
 resources/js/utils/useFreshFormAfterBack.ts | 26 +++++++++++++++++++++
 4 files changed, 55 insertions(+), 23 deletions(-)
 create mode 100644 resources/js/utils/useFreshFormAfterBack.ts

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index fba82d18..80b8cf80 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -1,5 +1,6 @@
 import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { router } from "@inertiajs/vue3";
 import Edit from "./Edit.vue";
 import { useForm, useWorkbench } from "@/stores";
 
@@ -118,3 +119,26 @@ describe("editor loading", () => {
         expect(useWorkbench().putOnWorkbench).not.toHaveBeenCalled();
     });
 });
+
+describe("editor from history", () => {
+    afterEach(() => {
+        wrapper?.unmount();
+        wrapper = undefined;
+        vi.restoreAllMocks();
+    });
+
+    it("loads the form again when browser Back brings the editor back", async () => {
+        const visit = vi.spyOn(router, "visit").mockImplementation(() => {});
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+
+        await mountEditor(loads(blocks));
+
+        expect(visit).toHaveBeenCalledWith(window.location.href, {
+            only: ["form"],
+            replace: true,
+            preserveScroll: true,
+        });
+    });
+});
diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index 29c8a279..d85caa80 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -8,6 +8,7 @@
 import AppLayout from "@/Layouts/AppLayout.vue";
 import FormDocument from "@/components/Factory/Document/FormDocument.vue";
 import { useForm, useWorkbench } from "@/stores";
+import { useFreshFormAfterBack } from "@/utils/useFreshFormAfterBack";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 
 const props = defineProps<{
@@ -62,6 +63,7 @@ onMounted(async () => {
   await store.getFormBlockMapping();
 });
 
+useFreshFormAfterBack();
 workbench.clearWorkbench();
 store.$patch({
   form: props.form,
diff --git a/resources/js/Pages/Forms/Settings.vue b/resources/js/Pages/Forms/Settings.vue
index 9649392a..90325900 100644
--- a/resources/js/Pages/Forms/Settings.vue
+++ b/resources/js/Pages/Forms/Settings.vue
@@ -61,20 +61,6 @@
   </app-layout>
 </template>
 
-<script lang="ts">
-import { router } from "@inertiajs/vue3";
-
-// browser Back and Forward show a page with its old props from history; a tab
-// change in the address has no state and keeps the page
-let fromHistory = false;
-window.addEventListener("popstate", (event) => {
-  fromHistory = event.state !== null;
-});
-router.on("before", () => {
-  fromHistory = false;
-});
-</script>
-
 <script setup lang="ts">
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
@@ -87,6 +73,7 @@ import Options from "@/components/Factory/Settings/Options.vue";
 import Privacy from "@/components/Factory/Settings/Privacy.vue";
 import TemplateExport from "@/components/Factory/Settings/TemplateExport.vue";
 import { useForm } from "@/stores";
+import { useFreshFormAfterBack } from "@/utils/useFreshFormAfterBack";
 import { onBeforeUnmount, ref } from "vue";
 
 const props = defineProps<{
@@ -135,15 +122,8 @@ if (foundIndex !== -1) {
   tabChanged(0);
 }
 
-// load the form again, so the tabs show changes made in the editor
-if (fromHistory) {
-  fromHistory = false;
-  router.visit(location.href, {
-    only: ["form"],
-    replace: true,
-    preserveScroll: true,
-  });
-}
+// after the hash, so the reload keeps the tab
+useFreshFormAfterBack();
 
 onBeforeUnmount(() => {
   store.clearForm();
diff --git a/resources/js/utils/useFreshFormAfterBack.ts b/resources/js/utils/useFreshFormAfterBack.ts
new file mode 100644
index 00000000..abbb0c84
--- /dev/null
+++ b/resources/js/utils/useFreshFormAfterBack.ts
@@ -0,0 +1,26 @@
+import { router } from "@inertiajs/vue3";
+
+// browser Back and Forward show a page with its old props from history; a tab
+// change in the address has no state and keeps the page
+let fromHistory = false;
+window.addEventListener("popstate", (event) => {
+  fromHistory = event.state !== null;
+});
+router.on("before", () => {
+  fromHistory = false;
+});
+
+// call it in a page's setup: loads the form again when the page came from
+// history, so it shows changes made on the other page
+export function useFreshFormAfterBack() {
+  if (!fromHistory) {
+    return;
+  }
+
+  fromHistory = false;
+  router.visit(location.href, {
+    only: ["form"],
+    replace: true,
+    preserveScroll: true,
+  });
+}

From 0e895387fd475b045c190b6564521d26aa92a330 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:39:18 +0200
Subject: [PATCH 08/16] fix: reload the form after Back only once the end
 screen save has landed

With several PHP workers the reload could finish before the save, so
Settings showed the old headline and its Save wrote it back. A visit
started while waiting still wins over the late reload.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Settings.test.ts     | 21 ++++++++-
 .../Factory/Document/EndScreenBlock.test.ts   | 31 +++++++++++++
 .../Factory/Document/EndScreenBlock.vue       |  6 ++-
 resources/js/utils/useFreshFormAfterBack.ts   | 44 ++++++++++++++-----
 4 files changed, 87 insertions(+), 15 deletions(-)

diff --git a/resources/js/Pages/Forms/Settings.test.ts b/resources/js/Pages/Forms/Settings.test.ts
index 59b96310..043d4fa4 100644
--- a/resources/js/Pages/Forms/Settings.test.ts
+++ b/resources/js/Pages/Forms/Settings.test.ts
@@ -1,7 +1,8 @@
-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 { router } from "@inertiajs/vue3";
 import Settings from "./Settings.vue";
+import { finishBeforeReload } from "@/utils/useFreshFormAfterBack";
 
 vi.mock("@inertiajs/vue3", async (importOriginal) => ({
     ...(await importOriginal<typeof import("@inertiajs/vue3")>()),
@@ -43,12 +44,13 @@ describe("settings page from history", () => {
         wrapper = undefined;
     });
 
-    it("loads the form again when browser Back brings the page back", () => {
+    it("loads the form again when browser Back brings the page back", async () => {
         window.dispatchEvent(
             new PopStateEvent("popstate", { state: { component: "x" } }),
         );
 
         mountSettings();
+        await flushPromises();
 
         expect(router.visit).toHaveBeenCalledWith(window.location.href, {
             only: ["form"],
@@ -70,6 +72,21 @@ describe("settings page from history", () => {
         expect(router.visit).not.toHaveBeenCalled();
     });
 
+    it("skips the reload when you go elsewhere while a save on Back is on its way", async () => {
+        let landed = () => {};
+        finishBeforeReload(new Promise<void>((resolve) => (landed = resolve)));
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+
+        mountSettings();
+        onVisit(new CustomEvent("inertia:before"));
+        landed();
+        await flushPromises();
+
+        expect(router.visit).not.toHaveBeenCalled();
+    });
+
     it("loads nothing more when only the tab in the address changes", () => {
         window.dispatchEvent(new PopStateEvent("popstate", { state: null }));
 
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 39177729..6c9b8fc0 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -2,9 +2,11 @@ import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { AxiosError, AxiosResponse } from "axios";
 import { createPinia, setActivePinia } from "pinia";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { router } from "@inertiajs/vue3";
 import { callUpdateForm } from "@/api/forms";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
+import { useFreshFormAfterBack } from "@/utils/useFreshFormAfterBack";
 import CompletionPage from "@/components/Factory/Settings/CompletionPage.vue";
 import EndScreenBlock from "./EndScreenBlock.vue";
 
@@ -157,6 +159,35 @@ describe("the end screen in the document", () => {
         });
     });
 
+    it("lets the next page reload the form only after the save made on Back", async () => {
+        const visit = vi.spyOn(router, "visit").mockImplementation(() => {});
+        let answer = () => {};
+        vi.mocked(callUpdateForm).mockImplementation(
+            (_, values) =>
+                new Promise((resolve) => {
+                    answer = () =>
+                        resolve({
+                            data: { ...useForm().form, ...values },
+                        } as AxiosResponse);
+                }),
+        );
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+        // the page Back goes to
+        useFreshFormAfterBack();
+        await flushPromises();
+        expect(visit).not.toHaveBeenCalled();
+
+        answer();
+        await flushPromises();
+        expect(visit).toHaveBeenCalledTimes(1);
+        visit.mockRestore();
+    });
+
     it("saves on its own after a short pause while you type", async () => {
         vi.useFakeTimers();
         try {
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index f811ce83..959cf92f 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -140,6 +140,7 @@ import debounce from "lodash/debounce";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
 import Editor from "@/components/Factory/Shared/Editor.vue";
+import { finishBeforeReload } from "@/utils/useFreshFormAfterBack";
 import { plainText } from "./questionSummary";
 
 const store = useForm();
@@ -209,8 +210,9 @@ const leave = (event: FocusEvent) => {
   }
 };
 
-// browser Back moves no focus; the old page stays until the next one has loaded
-useEventListener(window, "popstate", () => save.flush());
+// browser Back moves no focus; the old page stays until the next one has loaded,
+// and that page waits for this save before it loads the form again
+useEventListener(window, "popstate", () => finishBeforeReload(save.flush()));
 
 const open = async () => {
   workbench.clearWorkbench();
diff --git a/resources/js/utils/useFreshFormAfterBack.ts b/resources/js/utils/useFreshFormAfterBack.ts
index abbb0c84..6413d952 100644
--- a/resources/js/utils/useFreshFormAfterBack.ts
+++ b/resources/js/utils/useFreshFormAfterBack.ts
@@ -3,24 +3,46 @@ import { router } from "@inertiajs/vue3";
 // browser Back and Forward show a page with its old props from history; a tab
 // change in the address has no state and keeps the page
 let fromHistory = false;
+// counts page changes, so a late reload can see that the page moved on
+let navigations = 0;
+// a save sent on Back must land before the reload reads the form
+let pendingSave: Promise<unknown> | undefined;
+
 window.addEventListener("popstate", (event) => {
-  fromHistory = event.state !== null;
+    fromHistory = event.state !== null;
+    if (fromHistory) {
+        navigations++;
+    }
 });
 router.on("before", () => {
-  fromHistory = false;
+    fromHistory = false;
+    navigations++;
 });
 
+export function finishBeforeReload(save: Promise<unknown> | undefined) {
+    pendingSave = save;
+}
+
 // call it in a page's setup: loads the form again when the page came from
 // history, so it shows changes made on the other page
 export function useFreshFormAfterBack() {
-  if (!fromHistory) {
-    return;
-  }
+    if (!fromHistory) {
+        return;
+    }
+
+    fromHistory = false;
+    const page = navigations;
+
+    Promise.resolve(pendingSave).finally(() => {
+        // a visit started meanwhile wins
+        if (page !== navigations) {
+            return;
+        }
 
-  fromHistory = false;
-  router.visit(location.href, {
-    only: ["form"],
-    replace: true,
-    preserveScroll: true,
-  });
+        router.visit(location.href, {
+            only: ["form"],
+            replace: true,
+            preserveScroll: true,
+        });
+    });
 }

From c2b787bff6214d51b5587552be1facdd60a77ae4 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:49:53 +0200
Subject: [PATCH 09/16] fix: reload the form when a page loads while an end
 screen save is on its way

A click on a link right after typing could load Settings before the save
landed, and its Save wrote the old headline back. Every end screen save
is now tracked; a page that loads meanwhile waits for it, then loads the
form again. The helper is renamed useFreshForm.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.vue             |  4 +--
 resources/js/Pages/Forms/Settings.test.ts     | 19 +++++++----
 resources/js/Pages/Forms/Settings.vue         |  4 +--
 .../Factory/Document/EndScreenBlock.test.ts   | 34 +++++++++++++++++--
 .../Factory/Document/EndScreenBlock.vue       | 10 +++---
 ...eFreshFormAfterBack.ts => useFreshForm.ts} | 28 ++++++++++-----
 6 files changed, 72 insertions(+), 27 deletions(-)
 rename resources/js/utils/{useFreshFormAfterBack.ts => useFreshForm.ts} (55%)

diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index d85caa80..8726a6de 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -8,7 +8,7 @@
 import AppLayout from "@/Layouts/AppLayout.vue";
 import FormDocument from "@/components/Factory/Document/FormDocument.vue";
 import { useForm, useWorkbench } from "@/stores";
-import { useFreshFormAfterBack } from "@/utils/useFreshFormAfterBack";
+import { useFreshForm } from "@/utils/useFreshForm";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 
 const props = defineProps<{
@@ -63,7 +63,7 @@ onMounted(async () => {
   await store.getFormBlockMapping();
 });
 
-useFreshFormAfterBack();
+useFreshForm();
 workbench.clearWorkbench();
 store.$patch({
   form: props.form,
diff --git a/resources/js/Pages/Forms/Settings.test.ts b/resources/js/Pages/Forms/Settings.test.ts
index 043d4fa4..037bf699 100644
--- a/resources/js/Pages/Forms/Settings.test.ts
+++ b/resources/js/Pages/Forms/Settings.test.ts
@@ -2,7 +2,7 @@ import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { router } from "@inertiajs/vue3";
 import Settings from "./Settings.vue";
-import { finishBeforeReload } from "@/utils/useFreshFormAfterBack";
+import { trackFormSave } from "@/utils/useFreshForm";
 
 vi.mock("@inertiajs/vue3", async (importOriginal) => ({
     ...(await importOriginal<typeof import("@inertiajs/vue3")>()),
@@ -59,7 +59,7 @@ describe("settings page from history", () => {
         });
     });
 
-    it("loads nothing more on a normal visit, also one after a Back", () => {
+    it("loads nothing more on a normal visit, also one after a Back", async () => {
         // a Back to another page, then a link to Settings
         window.dispatchEvent(
             new PopStateEvent("popstate", { state: { component: "x" } }),
@@ -68,29 +68,34 @@ describe("settings page from history", () => {
         onVisit(new CustomEvent("inertia:before"));
 
         mountSettings();
+        await flushPromises();
 
         expect(router.visit).not.toHaveBeenCalled();
     });
 
-    it("skips the reload when you go elsewhere while a save on Back is on its way", async () => {
+    it("lets a visit started while a save is on its way win, and its page loads the form after the save", async () => {
         let landed = () => {};
-        finishBeforeReload(new Promise<void>((resolve) => (landed = resolve)));
+        trackFormSave(new Promise<void>((resolve) => (landed = resolve)));
         window.dispatchEvent(
             new PopStateEvent("popstate", { state: { component: "x" } }),
         );
-
         mountSettings();
+
+        // you go to another page before the save lands
         onVisit(new CustomEvent("inertia:before"));
+        wrapper?.unmount();
+        mountSettings();
         landed();
         await flushPromises();
 
-        expect(router.visit).not.toHaveBeenCalled();
+        expect(router.visit).toHaveBeenCalledTimes(1);
     });
 
-    it("loads nothing more when only the tab in the address changes", () => {
+    it("loads nothing more when only the tab in the address changes", async () => {
         window.dispatchEvent(new PopStateEvent("popstate", { state: null }));
 
         mountSettings();
+        await flushPromises();
 
         expect(router.visit).not.toHaveBeenCalled();
     });
diff --git a/resources/js/Pages/Forms/Settings.vue b/resources/js/Pages/Forms/Settings.vue
index 90325900..c1aa06dd 100644
--- a/resources/js/Pages/Forms/Settings.vue
+++ b/resources/js/Pages/Forms/Settings.vue
@@ -73,7 +73,7 @@ import Options from "@/components/Factory/Settings/Options.vue";
 import Privacy from "@/components/Factory/Settings/Privacy.vue";
 import TemplateExport from "@/components/Factory/Settings/TemplateExport.vue";
 import { useForm } from "@/stores";
-import { useFreshFormAfterBack } from "@/utils/useFreshFormAfterBack";
+import { useFreshForm } from "@/utils/useFreshForm";
 import { onBeforeUnmount, ref } from "vue";
 
 const props = defineProps<{
@@ -123,7 +123,7 @@ if (foundIndex !== -1) {
 }
 
 // after the hash, so the reload keeps the tab
-useFreshFormAfterBack();
+useFreshForm();
 
 onBeforeUnmount(() => {
   store.clearForm();
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 6c9b8fc0..4d4b9374 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -6,7 +6,7 @@ import { router } from "@inertiajs/vue3";
 import { callUpdateForm } from "@/api/forms";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
-import { useFreshFormAfterBack } from "@/utils/useFreshFormAfterBack";
+import { useFreshForm } from "@/utils/useFreshForm";
 import CompletionPage from "@/components/Factory/Settings/CompletionPage.vue";
 import EndScreenBlock from "./EndScreenBlock.vue";
 
@@ -178,7 +178,37 @@ describe("the end screen in the document", () => {
             new PopStateEvent("popstate", { state: { component: "x" } }),
         );
         // the page Back goes to
-        useFreshFormAfterBack();
+        useFreshForm();
+        await flushPromises();
+        expect(visit).not.toHaveBeenCalled();
+
+        answer();
+        await flushPromises();
+        expect(visit).toHaveBeenCalledTimes(1);
+        visit.mockRestore();
+    });
+
+    it("lets a page opened by a link while the save is on its way reload the form after it", async () => {
+        const visit = vi.spyOn(router, "visit").mockImplementation(() => {});
+        let answer = () => {};
+        vi.mocked(callUpdateForm).mockImplementation(
+            (_, values) =>
+                new Promise((resolve) => {
+                    answer = () =>
+                        resolve({
+                            data: { ...useForm().form, ...values },
+                        } as AxiosResponse);
+                }),
+        );
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        await block.find("#end-screen-headline").trigger("focusout");
+        // the link's visit starts, and its page loads
+        document.dispatchEvent(
+            new CustomEvent("inertia:before", { detail: { visit: {} } }),
+        );
+        useFreshForm();
         await flushPromises();
         expect(visit).not.toHaveBeenCalled();
 
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index 959cf92f..4e2717c8 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -140,7 +140,7 @@ import debounce from "lodash/debounce";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
 import Editor from "@/components/Factory/Shared/Editor.vue";
-import { finishBeforeReload } from "@/utils/useFreshFormAfterBack";
+import { trackFormSave } from "@/utils/useFreshForm";
 import { plainText } from "./questionSummary";
 
 const store = useForm();
@@ -191,7 +191,8 @@ const save = debounce(async () => {
   }
 
   try {
-    await store.updateForm(changes);
+    // the next page may load before this lands: it loads the form again after
+    await trackFormSave(store.updateForm(changes));
     notice.clearSaveError("saveEndScreen");
   } catch (error) {
     notice.showSaveError(error, "saveEndScreen");
@@ -210,9 +211,8 @@ const leave = (event: FocusEvent) => {
   }
 };
 
-// browser Back moves no focus; the old page stays until the next one has loaded,
-// and that page waits for this save before it loads the form again
-useEventListener(window, "popstate", () => finishBeforeReload(save.flush()));
+// browser Back moves no focus; the old page stays until the next one has loaded
+useEventListener(window, "popstate", () => save.flush());
 
 const open = async () => {
   workbench.clearWorkbench();
diff --git a/resources/js/utils/useFreshFormAfterBack.ts b/resources/js/utils/useFreshForm.ts
similarity index 55%
rename from resources/js/utils/useFreshFormAfterBack.ts
rename to resources/js/utils/useFreshForm.ts
index 6413d952..7bfcf6ff 100644
--- a/resources/js/utils/useFreshFormAfterBack.ts
+++ b/resources/js/utils/useFreshForm.ts
@@ -3,10 +3,12 @@ import { router } from "@inertiajs/vue3";
 // browser Back and Forward show a page with its old props from history; a tab
 // change in the address has no state and keeps the page
 let fromHistory = false;
+// a page asked for while a form save is on its way can get the form from before it
+let askedDuringSave = false;
+let savesOnTheirWay = 0;
+let saves: Promise<unknown> = Promise.resolve();
 // counts page changes, so a late reload can see that the page moved on
 let navigations = 0;
-// a save sent on Back must land before the reload reads the form
-let pendingSave: Promise<unknown> | undefined;
 
 window.addEventListener("popstate", (event) => {
     fromHistory = event.state !== null;
@@ -16,24 +18,32 @@ window.addEventListener("popstate", (event) => {
 });
 router.on("before", () => {
     fromHistory = false;
+    askedDuringSave = savesOnTheirWay > 0;
     navigations++;
 });
 
-export function finishBeforeReload(save: Promise<unknown> | undefined) {
-    pendingSave = save;
+// pages that load meanwhile wait for this save, then load the form again
+export function trackFormSave<T>(save: Promise<T>): Promise<T> {
+    const done = () => savesOnTheirWay--;
+
+    savesOnTheirWay++;
+    save.then(done, done);
+    saves = Promise.allSettled([saves, save]);
+    return save;
 }
 
-// call it in a page's setup: loads the form again when the page came from
-// history, so it shows changes made on the other page
-export function useFreshFormAfterBack() {
-    if (!fromHistory) {
+// call it in a page's setup: loads the form again when the page may show it
+// from before a change, from history or from a save that hadn't landed yet
+export function useFreshForm() {
+    if (!fromHistory && !askedDuringSave) {
         return;
     }
 
     fromHistory = false;
+    askedDuringSave = false;
     const page = navigations;
 
-    Promise.resolve(pendingSave).finally(() => {
+    saves.then(() => {
         // a visit started meanwhile wins
         if (page !== navigations) {
             return;

From 92c54b56b1f4d6024232bc602b37375d0203a588 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:56:27 +0200
Subject: [PATCH 10/16] fix: load the form over the API, so a tab picked
 meanwhile stays

After Back, or a page opened while an end screen save was on its way,
the page reloaded itself through Inertia. That reload wrote the old tab
back into the address and remounted Settings on it. Now the page loads
the form over the API and remounts only the open Settings panel.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts         | 18 ++++---
 resources/js/Pages/Forms/Settings.test.ts     | 51 +++++++++++++++----
 resources/js/Pages/Forms/Settings.vue         |  7 +--
 .../Factory/Document/EndScreenBlock.test.ts   | 32 +++++++-----
 resources/js/utils/useFreshForm.ts            | 39 ++++++++------
 5 files changed, 100 insertions(+), 47 deletions(-)

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index 80b8cf80..c3800bde 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -1,9 +1,15 @@
 import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { router } from "@inertiajs/vue3";
+import { AxiosResponse } from "axios";
+import { callGetForm } from "@/api/forms";
 import Edit from "./Edit.vue";
 import { useForm, useWorkbench } from "@/stores";
 
+vi.mock("@/api/forms", async (importOriginal) => ({
+    ...(await importOriginal()),
+    callGetForm: vi.fn(),
+}));
+
 const form = { uuid: "form1", name: "Customer feedback" } as FormModel;
 const blocks = [
     { id: 1, uuid: "b1", type: "none" },
@@ -128,17 +134,15 @@ describe("editor from history", () => {
     });
 
     it("loads the form again when browser Back brings the editor back", async () => {
-        const visit = vi.spyOn(router, "visit").mockImplementation(() => {});
+        vi.mocked(callGetForm).mockResolvedValue({
+            data: { ...form, eoc_headline: "Thanks!" },
+        } as AxiosResponse);
         window.dispatchEvent(
             new PopStateEvent("popstate", { state: { component: "x" } }),
         );
 
         await mountEditor(loads(blocks));
 
-        expect(visit).toHaveBeenCalledWith(window.location.href, {
-            only: ["form"],
-            replace: true,
-            preserveScroll: true,
-        });
+        expect(useForm().form?.eoc_headline).toBe("Thanks!");
     });
 });
diff --git a/resources/js/Pages/Forms/Settings.test.ts b/resources/js/Pages/Forms/Settings.test.ts
index 037bf699..30ad825a 100644
--- a/resources/js/Pages/Forms/Settings.test.ts
+++ b/resources/js/Pages/Forms/Settings.test.ts
@@ -1,12 +1,19 @@
 import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { router } from "@inertiajs/vue3";
+import { AxiosResponse } from "axios";
+import { callGetForm } from "@/api/forms";
+import { useForm } from "@/stores";
 import Settings from "./Settings.vue";
 import { trackFormSave } from "@/utils/useFreshForm";
 
 vi.mock("@inertiajs/vue3", async (importOriginal) => ({
     ...(await importOriginal<typeof import("@inertiajs/vue3")>()),
-    router: { on: vi.fn(), visit: vi.fn() },
+    router: { on: vi.fn() },
+}));
+vi.mock("@/api/forms", async (importOriginal) => ({
+    ...(await importOriginal()),
+    callGetForm: vi.fn(),
 }));
 // its code highlighter needs a global Vue
 vi.mock("@/components/Factory/Settings/Embed.vue", () => ({
@@ -21,7 +28,11 @@ const stubs = {
     AppLayout: { props: ["title"], template: "<main><slot /></main>" },
     Options: true,
     Privacy: true,
-    CompletionPage: true,
+    // like the real one, it copies the form when it loads
+    CompletionPage: {
+        setup: () => ({ headline: useForm().form?.eoc_headline }),
+        template: "<p>{{ headline }}</p>",
+    },
     Appearance: true,
     Embed: true,
     TemplateExport: true,
@@ -37,6 +48,9 @@ const mountSettings = () => {
 describe("settings page from history", () => {
     beforeEach(() => {
         vi.clearAllMocks();
+        vi.mocked(callGetForm).mockResolvedValue({
+            data: form,
+        } as AxiosResponse);
     });
 
     afterEach(() => {
@@ -52,11 +66,7 @@ describe("settings page from history", () => {
         mountSettings();
         await flushPromises();
 
-        expect(router.visit).toHaveBeenCalledWith(window.location.href, {
-            only: ["form"],
-            replace: true,
-            preserveScroll: true,
-        });
+        expect(callGetForm).toHaveBeenCalledTimes(1);
     });
 
     it("loads nothing more on a normal visit, also one after a Back", async () => {
@@ -70,7 +80,7 @@ describe("settings page from history", () => {
         mountSettings();
         await flushPromises();
 
-        expect(router.visit).not.toHaveBeenCalled();
+        expect(callGetForm).not.toHaveBeenCalled();
     });
 
     it("lets a visit started while a save is on its way win, and its page loads the form after the save", async () => {
@@ -88,7 +98,7 @@ describe("settings page from history", () => {
         landed();
         await flushPromises();
 
-        expect(router.visit).toHaveBeenCalledTimes(1);
+        expect(callGetForm).toHaveBeenCalledTimes(1);
     });
 
     it("loads nothing more when only the tab in the address changes", async () => {
@@ -97,6 +107,27 @@ describe("settings page from history", () => {
         mountSettings();
         await flushPromises();
 
-        expect(router.visit).not.toHaveBeenCalled();
+        expect(callGetForm).not.toHaveBeenCalled();
+    });
+
+    it("keeps the tab you switch to while the form loads again", async () => {
+        let landed = () => {};
+        trackFormSave(new Promise<void>((resolve) => (landed = resolve)));
+        vi.mocked(callGetForm).mockResolvedValue({
+            data: { ...form, eoc_headline: "Thanks!" },
+        } as AxiosResponse);
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+        mountSettings();
+
+        const tab = wrapper!.findAll("button[role=tab]")[2];
+        await tab.trigger("click");
+        landed();
+        await flushPromises();
+
+        expect(location.hash).toBe("#completion-page");
+        expect(tab.attributes("aria-selected")).toBe("true");
+        expect(wrapper!.text()).toContain("Thanks!");
     });
 });
diff --git a/resources/js/Pages/Forms/Settings.vue b/resources/js/Pages/Forms/Settings.vue
index c1aa06dd..a8712d4a 100644
--- a/resources/js/Pages/Forms/Settings.vue
+++ b/resources/js/Pages/Forms/Settings.vue
@@ -52,7 +52,7 @@
             </h3>
 
             <div class="mt-6 pb-6">
-              <component :is="item.component" />
+              <component :is="item.component" :key="freshForms" />
             </div>
           </TabPanel>
         </TabPanels>
@@ -122,8 +122,9 @@ if (foundIndex !== -1) {
   tabChanged(0);
 }
 
-// after the hash, so the reload keeps the tab
-useFreshForm();
+// the panels copy the form when they load
+const freshForms = ref(0);
+useFreshForm(() => freshForms.value++);
 
 onBeforeUnmount(() => {
   store.clearForm();
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 4d4b9374..b45c9628 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -2,8 +2,7 @@ import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { AxiosError, AxiosResponse } from "axios";
 import { createPinia, setActivePinia } from "pinia";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { router } from "@inertiajs/vue3";
-import { callUpdateForm } from "@/api/forms";
+import { callGetForm, callUpdateForm } from "@/api/forms";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
 import { useFreshForm } from "@/utils/useFreshForm";
@@ -12,6 +11,7 @@ import EndScreenBlock from "./EndScreenBlock.vue";
 
 vi.mock("@/api/forms", async (importOriginal) => ({
     ...(await importOriginal()),
+    callGetForm: vi.fn(),
     callUpdateForm: vi.fn(),
 }));
 
@@ -159,8 +159,13 @@ describe("the end screen in the document", () => {
         });
     });
 
-    it("lets the next page reload the form only after the save made on Back", async () => {
-        const visit = vi.spyOn(router, "visit").mockImplementation(() => {});
+    it("lets the next page load the form again only after the save made on Back", async () => {
+        vi.mocked(callGetForm).mockImplementation(
+            async () =>
+                ({
+                    data: useForm().form,
+                }) as AxiosResponse,
+        );
         let answer = () => {};
         vi.mocked(callUpdateForm).mockImplementation(
             (_, values) =>
@@ -180,16 +185,20 @@ describe("the end screen in the document", () => {
         // the page Back goes to
         useFreshForm();
         await flushPromises();
-        expect(visit).not.toHaveBeenCalled();
+        expect(callGetForm).not.toHaveBeenCalled();
 
         answer();
         await flushPromises();
-        expect(visit).toHaveBeenCalledTimes(1);
-        visit.mockRestore();
+        expect(callGetForm).toHaveBeenCalledTimes(1);
     });
 
-    it("lets a page opened by a link while the save is on its way reload the form after it", async () => {
-        const visit = vi.spyOn(router, "visit").mockImplementation(() => {});
+    it("lets a page opened by a link while the save is on its way load the form again after it", async () => {
+        vi.mocked(callGetForm).mockImplementation(
+            async () =>
+                ({
+                    data: useForm().form,
+                }) as AxiosResponse,
+        );
         let answer = () => {};
         vi.mocked(callUpdateForm).mockImplementation(
             (_, values) =>
@@ -210,12 +219,11 @@ describe("the end screen in the document", () => {
         );
         useFreshForm();
         await flushPromises();
-        expect(visit).not.toHaveBeenCalled();
+        expect(callGetForm).not.toHaveBeenCalled();
 
         answer();
         await flushPromises();
-        expect(visit).toHaveBeenCalledTimes(1);
-        visit.mockRestore();
+        expect(callGetForm).toHaveBeenCalledTimes(1);
     });
 
     it("saves on its own after a short pause while you type", async () => {
diff --git a/resources/js/utils/useFreshForm.ts b/resources/js/utils/useFreshForm.ts
index 7bfcf6ff..251dd6b4 100644
--- a/resources/js/utils/useFreshForm.ts
+++ b/resources/js/utils/useFreshForm.ts
@@ -1,4 +1,6 @@
 import { router } from "@inertiajs/vue3";
+import { callGetForm } from "@/api/forms";
+import { useForm } from "@/stores";
 
 // browser Back and Forward show a page with its old props from history; a tab
 // change in the address has no state and keeps the page
@@ -7,7 +9,7 @@ let fromHistory = false;
 let askedDuringSave = false;
 let savesOnTheirWay = 0;
 let saves: Promise<unknown> = Promise.resolve();
-// counts page changes, so a late reload can see that the page moved on
+// counts page changes, so a late form load can see that the page moved on
 let navigations = 0;
 
 window.addEventListener("popstate", (event) => {
@@ -33,8 +35,9 @@ export function trackFormSave<T>(save: Promise<T>): Promise<T> {
 }
 
 // call it in a page's setup: loads the form again when the page may show it
-// from before a change, from history or from a save that hadn't landed yet
-export function useFreshForm() {
+// from before a change, from history or from a save that hadn't landed yet;
+// onFresh remounts the parts that copied the old form
+export function useFreshForm(onFresh?: () => void) {
     if (!fromHistory && !askedDuringSave) {
         return;
     }
@@ -42,17 +45,23 @@ export function useFreshForm() {
     fromHistory = false;
     askedDuringSave = false;
     const page = navigations;
+    const store = useForm();
 
-    saves.then(() => {
-        // a visit started meanwhile wins
-        if (page !== navigations) {
-            return;
-        }
-
-        router.visit(location.href, {
-            only: ["form"],
-            replace: true,
-            preserveScroll: true,
-        });
-    });
+    // a visit started meanwhile wins; the address and the tab stay as they are
+    const formHere = () => (page === navigations ? store.form : null);
+
+    saves
+        .then(() => {
+            const form = formHere();
+            return form && callGetForm(form);
+        })
+        .then((response) => {
+            if (response && formHere()?.uuid === response.data.uuid) {
+                store.form = response.data;
+                onFresh?.();
+            }
+        })
+        // the page keeps the form it came with
+        .catch(() => {});
 }
+

From 2d1b81b357bbeddcc187cfc2395fe94473f2e891 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:56:33 +0200
Subject: [PATCH 11/16] fix: open the end screen card with the form loaded
 again after Back

The editor no longer remounts when the fresh form lands. A card opened
before that copied the older text, and its next save sent it back.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/EndScreenBlock.test.ts   | 30 +++++++++++++++++++
 .../Factory/Document/EndScreenBlock.vue       |  3 +-
 resources/js/utils/useFreshForm.ts            |  7 ++++-
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index b45c9628..8fb52a9c 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -226,6 +226,36 @@ describe("the end screen in the document", () => {
         expect(callGetForm).toHaveBeenCalledTimes(1);
     });
 
+    it("opens with the form loaded again after Back, not the older one the page came with", async () => {
+        let answer = () => {};
+        vi.mocked(callGetForm).mockImplementation(
+            () =>
+                new Promise((resolve) => {
+                    answer = () =>
+                        resolve({
+                            data: { ...form, eoc_headline: "Thanks!" },
+                        } as AxiosResponse);
+                }),
+        );
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+        // the page Back goes to
+        useFreshForm();
+        const block = mountBlock();
+        await flushPromises();
+
+        await block.find("button").trigger("click");
+        answer();
+        await vi.waitFor(() =>
+            expect(block.find("#end-screen-headline").exists()).toBe(true),
+        );
+
+        expect(
+            block.get<HTMLInputElement>("#end-screen-headline").element.value,
+        ).toBe("Thanks!");
+    });
+
     it("saves on its own after a short pause while you type", async () => {
         vi.useFakeTimers();
         try {
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index 4e2717c8..b2919b4f 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -140,7 +140,7 @@ import debounce from "lodash/debounce";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
 import Editor from "@/components/Factory/Shared/Editor.vue";
-import { trackFormSave } from "@/utils/useFreshForm";
+import { freshFormLoaded, trackFormSave } from "@/utils/useFreshForm";
 import { plainText } from "./questionSummary";
 
 const store = useForm();
@@ -218,6 +218,7 @@ const open = async () => {
   workbench.clearWorkbench();
   // a change made before it closed may still be on its way
   await save.flush();
+  await freshFormLoaded();
   Object.assign(draft, saved());
   isOpen.value = true;
 
diff --git a/resources/js/utils/useFreshForm.ts b/resources/js/utils/useFreshForm.ts
index 251dd6b4..1eab5cc5 100644
--- a/resources/js/utils/useFreshForm.ts
+++ b/resources/js/utils/useFreshForm.ts
@@ -11,6 +11,7 @@ let savesOnTheirWay = 0;
 let saves: Promise<unknown> = Promise.resolve();
 // counts page changes, so a late form load can see that the page moved on
 let navigations = 0;
+let loading: Promise<unknown> = Promise.resolve();
 
 window.addEventListener("popstate", (event) => {
     fromHistory = event.state !== null;
@@ -50,7 +51,7 @@ export function useFreshForm(onFresh?: () => void) {
     // a visit started meanwhile wins; the address and the tab stay as they are
     const formHere = () => (page === navigations ? store.form : null);
 
-    saves
+    loading = saves
         .then(() => {
             const form = formHere();
             return form && callGetForm(form);
@@ -65,3 +66,7 @@ export function useFreshForm(onFresh?: () => void) {
         .catch(() => {});
 }
 
+// a copy of the form taken before this lands can be older than the page's form
+export function freshFormLoaded() {
+    return loading;
+}

From c00627ed077ffc767a227f1ec1e7aef9e563573d Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:01:14 +0200
Subject: [PATCH 12/16] test: expect the save error text part a uses now

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

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 8fb52a9c..4c975344 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -320,7 +320,7 @@ describe("the end screen in the document", () => {
         await flushPromises();
 
         expect(useNotice().message).toBe(
-            "Your change was not saved: The cta link field format is invalid.",
+            "Your change wasn't saved: The cta link field format is invalid.",
         );
         expect(useForm().form?.cta_link).toBe("https://example.com/cal");
     });

From ad113fffd837f2c6ea4552891df73430a804f41e Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:16:08 +0200
Subject: [PATCH 13/16] fix: keep an end screen change when the page reloads or
 closes

The end screen now saves like a question: the save status shows it, a
failed save gets Retry, and a change still in its pause goes out with
keepalive on pagehide or beforeunload. Retry only writes to the form it
was made in, and a closed block no longer leaves the status on Saving.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/api/forms.ts                     |   4 +-
 .../Factory/Document/EndScreenBlock.test.ts   | 115 ++++++++++++++++--
 .../Factory/Document/EndScreenBlock.vue       |  54 ++++++--
 resources/js/stores/form.test.ts              |   8 +-
 resources/js/stores/form.ts                   |   8 +-
 5 files changed, 158 insertions(+), 31 deletions(-)

diff --git a/resources/js/api/forms.ts b/resources/js/api/forms.ts
index 194bbb55..48482582 100644
--- a/resources/js/api/forms.ts
+++ b/resources/js/api/forms.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-async-promise-executor */
-import { AxiosResponse } from "axios";
+import { AxiosRequestConfig, AxiosResponse } from "axios";
 import handler from "./handler";
 
 export function callListForms(
@@ -86,12 +86,14 @@ export function callGetForm(
 export function callUpdateForm(
     form: FormModel,
     values: Partial<FormModel>,
+    config?: AxiosRequestConfig,
 ): Promise<AxiosResponse<FormModel>> {
     return new Promise(async (resolve, reject) => {
         try {
             const response = await handler.post(
                 window.route("api.forms.update", { uuid: form.uuid }),
                 values,
+                config,
             );
 
             resolve(response as AxiosResponse<FormModel>);
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 4c975344..193541af 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -129,6 +129,7 @@ describe("the end screen in the document", () => {
         expect(callUpdateForm).toHaveBeenCalledWith(
             expect.objectContaining({ uuid: "form1" }),
             { eoc_headline: "Thanks!" },
+            undefined,
         );
         expect(useForm().form?.eoc_headline).toBe("Thanks!");
     });
@@ -142,9 +143,11 @@ describe("the end screen in the document", () => {
         });
         await flushPromises();
 
-        expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
-            eoc_headline: "Thanks!",
-        });
+        expect(callUpdateForm).toHaveBeenCalledWith(
+            expect.anything(),
+            { eoc_headline: "Thanks!" },
+            undefined,
+        );
     });
 
     it("saves right away on browser Back", async () => {
@@ -154,9 +157,11 @@ describe("the end screen in the document", () => {
         window.dispatchEvent(new PopStateEvent("popstate"));
         await flushPromises();
 
-        expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
-            eoc_headline: "Thanks!",
-        });
+        expect(callUpdateForm).toHaveBeenCalledWith(
+            expect.anything(),
+            { eoc_headline: "Thanks!" },
+            undefined,
+        );
     });
 
     it("lets the next page load the form again only after the save made on Back", async () => {
@@ -265,9 +270,11 @@ describe("the end screen in the document", () => {
             vi.advanceTimersByTime(1000);
             await flushPromises();
 
-            expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
-                eoc_headline: "Thanks!",
-            });
+            expect(callUpdateForm).toHaveBeenCalledWith(
+                expect.anything(),
+                { eoc_headline: "Thanks!" },
+                undefined,
+            );
         } finally {
             vi.useRealTimers();
         }
@@ -294,10 +301,11 @@ describe("the end screen in the document", () => {
         await block.find("#end-screen-button").trigger("focusout");
         await flushPromises();
 
-        expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
-            cta_link: "mailto:a@b.co",
-            show_cta_link: false,
-        });
+        expect(callUpdateForm).toHaveBeenCalledWith(
+            expect.anything(),
+            { cta_link: "mailto:a@b.co", show_cta_link: false },
+            undefined,
+        );
         expect(block.find("#end-screen-button-label").exists()).toBe(false);
     });
 
@@ -325,6 +333,87 @@ describe("the end screen in the document", () => {
         expect(useForm().form?.cta_link).toBe("https://example.com/cal");
     });
 
+    it("shows Saving in the save status from the first key until the save lands", async () => {
+        let answer = () => {};
+        vi.mocked(callUpdateForm).mockImplementation(
+            (_, values) =>
+                new Promise((resolve) => {
+                    answer = () =>
+                        resolve({
+                            data: { ...useForm().form, ...values },
+                        } as AxiosResponse);
+                }),
+        );
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        expect(useNotice().saveStatus).toBe("saving");
+
+        await block.find("#end-screen-headline").trigger("focusout");
+        expect(useNotice().saveStatus).toBe("saving");
+
+        answer();
+        await flushPromises();
+        expect(useNotice().saveStatus).toBe("idle");
+    });
+
+    it("sends a refused change again on Retry", async () => {
+        vi.mocked(callUpdateForm).mockRejectedValueOnce(new AxiosError());
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        await block.find("#end-screen-headline").trigger("focusout");
+        await flushPromises();
+        expect(useNotice().saveStatus).toBe("failed");
+
+        useNotice().retrySaves();
+        await flushPromises();
+
+        expect(callUpdateForm).toHaveBeenCalledTimes(2);
+        expect(useForm().form?.eoc_headline).toBe("Thanks!");
+        expect(useNotice().saveStatus).toBe("idle");
+    });
+
+    it("sends a Retry only to the form it was made in", async () => {
+        vi.mocked(callUpdateForm).mockRejectedValueOnce(new AxiosError());
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        await block.find("#end-screen-headline").trigger("focusout");
+        await flushPromises();
+        // you open another form, then click Retry
+        block.unmount();
+        wrapper = undefined;
+        useForm().form = { ...form, uuid: "form2" };
+        useNotice().retrySaves();
+        await flushPromises();
+
+        expect(callUpdateForm).toHaveBeenCalledTimes(1);
+    });
+
+    it("stops showing Saving when it closes with a change still in its pause", async () => {
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        block.unmount();
+        wrapper = undefined;
+
+        expect(useNotice().saveStatus).toBe("idle");
+    });
+
+    it("sends a change still in its pause when the page closes, so it outlives the page", async () => {
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        window.dispatchEvent(new Event("pagehide"));
+
+        expect(callUpdateForm).toHaveBeenCalledWith(
+            expect.anything(),
+            { eoc_headline: "Thanks!" },
+            { adapter: "fetch", fetchOptions: { keepalive: true } },
+        );
+    });
+
     it("only links to Settings while the form sends people to a link instead", () => {
         useForm().form = { ...form, use_cta_redirect: true };
         const block = mountBlock();
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index b2919b4f..58b20d29 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -139,6 +139,7 @@ import { useEventListener } from "@vueuse/core";
 import debounce from "lodash/debounce";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
+import { keepAlive } from "@/api/handler";
 import Editor from "@/components/Factory/Shared/Editor.vue";
 import { freshFormLoaded, trackFormSave } from "@/utils/useFreshForm";
 import { plainText } from "./questionSummary";
@@ -177,8 +178,19 @@ const saved = () => ({
 
 const draft = reactive(saved());
 
-// sends what differs from the saved form, so a refused value is sent again until it's fixed
-const save = debounce(async () => {
+const SAVE = "saveEndScreen";
+// a Retry can run after you opened another form
+const formUuid = store.form?.uuid;
+// true while the page closes: the save must outlive it
+let isLeaving = false;
+
+// sends what differs from the saved form, so a refused value is sent again
+// until it's fixed, also by Retry
+const sendChanges = async () => {
+  if (store.form?.uuid !== formUuid) {
+    return;
+  }
+
   const before = saved();
   const changes = Object.fromEntries(
     fields
@@ -190,16 +202,17 @@ const save = debounce(async () => {
     return;
   }
 
-  try {
-    // the next page may load before this lands: it loads the form again after
-    await trackFormSave(store.updateForm(changes));
-    notice.clearSaveError("saveEndScreen");
-  } catch (error) {
-    notice.showSaveError(error, "saveEndScreen");
-  }
-}, 1000);
+  const config = isLeaving ? keepAlive(changes) : undefined;
+  // the next page may load before this lands: it loads the form again after
+  await trackFormSave(store.updateForm(changes, config));
+};
 
-watch(draft, () => save());
+const save = debounce(() => notice.send(SAVE, sendChanges), 1000);
+
+watch(draft, () => {
+  notice.waitForSave(SAVE);
+  save();
+});
 
 // save before a click on a link can load the next page, also "Also in Settings" in the card
 const leave = (event: FocusEvent) => {
@@ -214,6 +227,20 @@ const leave = (event: FocusEvent) => {
 // browser Back moves no focus; the old page stays until the next one has loaded
 useEventListener(window, "popstate", () => save.flush());
 
+// a reload or a closed tab within the pause would drop the change
+const saveOnLeave = () => {
+  isLeaving = true;
+
+  try {
+    save.flush();
+  } finally {
+    isLeaving = false;
+  }
+};
+
+useEventListener(window, "pagehide", saveOnLeave);
+useEventListener(window, "beforeunload", saveOnLeave);
+
 const open = async () => {
   workbench.clearWorkbench();
   // a change made before it closed may still be on its way
@@ -238,5 +265,8 @@ watch(
 );
 
 // the page cleared the form before this unmounts: a later save would go to the next page's form
-onBeforeUnmount(() => save.cancel());
+onBeforeUnmount(() => {
+  save.cancel();
+  delete notice.waitingSaves[SAVE];
+});
 </script>
diff --git a/resources/js/stores/form.test.ts b/resources/js/stores/form.test.ts
index 51828c2a..7beb18ca 100644
--- a/resources/js/stores/form.test.ts
+++ b/resources/js/stores/form.test.ts
@@ -30,9 +30,11 @@ describe("saving form settings", () => {
 
         await useForm().updateForm({ name: " Feedback " });
 
-        expect(handler.post).toHaveBeenCalledWith("/api/forms/form1", {
-            name: " Feedback ",
-        });
+        expect(handler.post).toHaveBeenCalledWith(
+            "/api/forms/form1",
+            { name: " Feedback " },
+            undefined,
+        );
         expect(useForm().form?.name).toBe("Feedback");
     });
 
diff --git a/resources/js/stores/form.ts b/resources/js/stores/form.ts
index 0429d4d8..49bb49c2 100644
--- a/resources/js/stores/form.ts
+++ b/resources/js/stores/form.ts
@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import { AxiosRequestConfig } from "axios";
 import {
     callDeleteFormImage,
     callUpdateForm,
@@ -134,12 +135,15 @@ export const useForm = defineStore("form", {
         },
 
         // only the page's own fields, and the store changes only once they're saved
-        async updateForm(newValues: Partial<FormModel>) {
+        async updateForm(
+            newValues: Partial<FormModel>,
+            config?: AxiosRequestConfig,
+        ) {
             if (!this.form) {
                 return;
             }
 
-            const response = await callUpdateForm(this.form, newValues);
+            const response = await callUpdateForm(this.form, newValues, config);
             // the editor may have left this form while it saved
             if (this.form?.uuid !== response.data.uuid) {
                 return;

From ef472fa15f36595b0e19baa6d1da053578736159 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:46:21 +0200
Subject: [PATCH 14/16] fix: give the open end card the question card's phone
 sizes and one focus bar

touch-fields on the card (44 px fields with 16 px text, 44 px switch tap
area below 1024), a 44 px tap area on "Also in Settings", the number
column at w-8 below 640 like the questions, and no wrapper bar around the
text: the bare editor draws its own.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/EndScreenBlock.test.ts       | 15 +++++++++++++++
 .../Factory/Document/EndScreenBlock.vue           | 11 ++++-------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 193541af..3b109d52 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -112,6 +112,21 @@ describe("the end screen in the document", () => {
         expect(block.find("#end-screen-headline").exists()).toBe(false);
     });
 
+    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");
+
+        expect(number.classes()).toEqual(
+            expect.arrayContaining(["w-8", "sm:w-12"]),
+        );
+        expect(card.classes()).toContain("touch-fields");
+        expect(block.get("a").classes()).toContain("min-h-11");
+        // the editor draws its own bar
+        expect(block.find(".focus-within\\:border-blue-500").exists()).toBe(
+            false,
+        );
+    });
+
     it("saves only what changed, right away when you leave the block", async () => {
         const block = await open();
 
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index 58b20d29..d350493e 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="row-end-screen" class="flex items-start">
-    <div class="flex w-12 shrink-0 justify-end pr-2 pt-3">
+    <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" />
       </span>
@@ -22,7 +22,7 @@
 
     <div
       v-else-if="isOpen"
-      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"
       @focusout="leave"
     >
       <div class="flex items-center gap-3">
@@ -43,10 +43,7 @@
         >
       </div>
 
-      <!-- the same focus sign as the headline -->
-      <div
-        class="-ml-2 border-l-2 border-transparent pl-1.5 focus-within:border-blue-500"
-      >
+      <div>
         <span id="end-screen-text-label" class="sr-only">End screen text</span>
         <Editor id="end-screen-text" v-model="draft.eoc_text" bare />
       </div>
@@ -65,7 +62,7 @@
           />
           <Link
             :href="settingsLink"
-            class="ml-auto text-xs text-grey-600 underline hover:text-grey-900"
+            class="ml-auto inline-flex min-h-11 items-center text-xs text-grey-600 underline hover:text-grey-900 lg:min-h-0"
             >Also in Settings</Link
           >
         </div>

From aa1c1f43b469927ad493b8ff0adc6a559c331966 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:46:32 +0200
Subject: [PATCH 15/16] fix: name the end screen in its save error

"Your change to the end screen wasn't saved.", like a question's error
names the question. The questions' text stays the same.

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

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 3b109d52..d7ece47c 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -343,7 +343,7 @@ describe("the end screen in the document", () => {
         await flushPromises();
 
         expect(useNotice().message).toBe(
-            "Your change wasn't saved: The cta link field format is invalid.",
+            "Your change to the end screen wasn't saved: The cta link field format is invalid.",
         );
         expect(useForm().form?.cta_link).toBe("https://example.com/cal");
     });
diff --git a/resources/js/stores/notice.ts b/resources/js/stores/notice.ts
index 80a38a05..59d3e14b 100644
--- a/resources/js/stores/notice.ts
+++ b/resources/js/stores/notice.ts
@@ -43,6 +43,9 @@ function questionName(block: FormBlockModel): string {
     return quoted ? `question ${number} (${quoted})` : `question ${number}`;
 }
 
+// saves without a block, by what they change
+const saveNames: Record<string, string> = { saveEndScreen: "the end screen" };
+
 export const useNotice = defineStore("notice", {
     state: (): NoticeStore => {
         return {
@@ -109,7 +112,9 @@ export const useNotice = defineStore("notice", {
             save: string,
             block?: FormBlockModel | null,
         ) {
-            const name = block ? questionName(block) : "";
+            const name = block
+                ? questionName(block)
+                : (saveNames[save] ?? "");
             const change = name ? `Your change to ${name}` : "Your change";
             const response =
                 error instanceof AxiosError ? error.response : undefined;

From 4b571197b2e94d978d2f9217e1b4ad98991a1c6d Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:48:07 +0200
Subject: [PATCH 16/16] fix: keep the end screen's hidden label inside the
 document

The closed row's absolute sr-only label had no positioned parent up to
the editor's outer box, so it stretched the page past the document's
scroll box: the page grew to over 3000 px and could scroll the top bar
out of view.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Document/EndScreenBlock.test.ts  | 7 +++++++
 .../js/components/Factory/Document/EndScreenBlock.vue      | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index d7ece47c..1025d4b5 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -76,6 +76,13 @@ describe("the end screen in the document", () => {
         expect(text).toContain("Button: Add to calendar");
     });
 
+    it("keeps its hidden label inside the document's scroll box", () => {
+        // else the absolute sr-only label stretches the whole page
+        expect(mountBlock().get("#row-end-screen").classes()).toContain(
+            "relative",
+        );
+    });
+
     it("shows the default headline people see when it has none", async () => {
         useForm().form = { ...form, eoc_headline: null, show_cta_link: false };
         const text = mountBlock().find("button").text();
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index d350493e..97dbf42c 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="row-end-screen" class="flex items-start">
+  <div id="row-end-screen" class="relative flex items-start">
     <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" />