Form document: outline, tablet and phone layout

[PhilReinking]

Part b of the form document: an outline to jump to any question, and a layout that works on tablets and phones. Stacked on #268, so this PR shows only part b.

Part of BITS-282

• Outline: a 232 px column from 1280 px, a panel behind an Outline button below that. Picking a question opens it.
• Phone (below 640 px): Settings open as a bottom sheet. Merge ffcd480 matched it to Edit the whole form as one document (part 1) #268's review fix: please read it too.
• Below 1024 px the card's controls are 44 px and its fields 16 px, so iOS doesn't zoom. One CSS rule covers D9 fields.
• From the design re-check: a focus bar on the question text, a dashed "Add policy" row, and 100dvh for iPhone Safari.
• Review fixes (711992e): the outline panel's rows and Close are 44 px below 1024 px; the phone sheet gives focus back to Settings on Done and Esc; the sheet's drag handle is gone (it couldn't be dragged).

Tested: vitest, lint, vue-tsc, build locally (stacked PR, no CI). By hand at 1440, 1024, 768, 390, 360: 44 px targets, outline jump, no sideways scroll.

Not tested: a real iPhone (100dvh, zoom), touch, Safari, Firefox, a screen reader.

🤖 Generated with Claude Code

[PhilReinking]

OK at 3945f4c. No CI (stacked): Vitest 301, lint, vue-tsc and the build pass locally. Two shoulds inline.

Held in a browser run with 36 questions: a jump by click or Enter opens the question with the cursor in it. The tablet panel keeps focus inside, Esc gives it back, and it closes above 1280 px. On a phone a new question gets its answer field without Settings. ?block= scrolls the question into view.

[PhilReinking]

On a phone, Done and Esc close the sheet, but the focus stays on the hidden Done button, so the browser drops it to the page body (a tap on the backdrop is fine). A keyboard or screen reader user starts again at the top of the page. The kept sheet doesn't give the focus back by itself. Maybe give it back when the sheet closes (I haven't run this):

         <button
+          ref="settingsButton"
           type="button"

+const settingsButton = ref<HTMLButtonElement | null>(null);
+
+// the kept sheet doesn't give the focus back when it closes
+watch(settingsOpen, async (open) => {
+  if (!open && isPhone.value) {
+    await nextTick();
+    settingsButton.value?.focus();
+  }
+});

In the Done test, document.activeElement is still Done after the click, so expect(document.activeElement).toBe(settingsButton().element) would catch it.

[PhilReinking]

On phones and tablets the outline rows are 32 px tall, and from 640 px the panel's close button is 32 px too (sm:h-8 sm:w-8 in FormDocument.vue). The card's controls are 44 px below 1024 px. Same here, with lg:h-8 lg:w-8 on the close button:

Suggested change

	class="flex h-8 w-full items-center gap-2 rounded-md pr-2 text-left text-[13px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
	class="flex h-11 w-full items-center gap-2 rounded-md pr-2 text-left text-[13px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:h-8"

[PhilReinking]

OK at 711992e. No CI (stacked): Vitest 302, lint, vue-tsc and the build pass locally. Both shoulds are fixed.

The new tests fail with 3945f4c's QuestionCard. In the browser, Done, Esc and a backdrop tap all give the focus back to Settings. Outline rows and Close are 44 px at 390 and 768 px.

[PhilReinking]

OK at 68235f3 (part a merged in). No CI (stacked), local runs: Vitest 341. The diff without CHANGELOG.md is byte-identical to the reviewed one.

[PhilReinking]

Landed in main with #282 (the editor rebuild as one PR); this PR's commits are part of it.