From 48c744372bd0fc27614f3014d85f51b501997abe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Mon, 31 Aug 2026 07:02:52 +0100
Subject: [PATCH] Add section goes at the end of the page, not inside the first
 one
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A built page is full-bleed now, so each band can draw a separator the width of the window, and each
holds its own content to the measure. `[data-content-column]` is therefore no longer one element
wrapping every section — it is one per section, and appending the drop zone to the first match put
"add a section" inside section one.

So it goes in `main`, with its width taken from a column rather than from a constant: the measure is
Tailwind's `max-w-7xl` and this file has no business knowing that. No sections, no column to ask, and
full width is right anyway — there is nothing to line up with.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 web/canvas.ts | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/web/canvas.ts b/web/canvas.ts
index 28d97ae..7b8ee1f 100644
--- a/web/canvas.ts
+++ b/web/canvas.ts
@@ -389,16 +389,19 @@ export function paintCanvas(document: Document, canvas: Canvas): () => void {
 
   // ── Add section, always last ─────────────────────────────────────────────────────────────────
   /*
-    Add section goes inside the CONTENT COLUMN, not `main`.
+    Add section goes at the END OF THE PAGE, held to the measure by hand.
 
-    `main` is the full width of the page; the column is what holds it to its measure. Appended to main,
-    the drop zone ran edge to edge and straight past the guides — describing a place a section could go
-    that no section will ever occupy.
+    It used to be appended to the content column, which was one element wrapping every section. It is
+    not one element any more: a built page is full-bleed so each band can draw a separator the width of
+    the window, and each holds its OWN content to the measure. Appending to the first thing matching
+    `[data-content-column]` would now put "add a section" inside section one.
 
-    Falls back to `main` for a page that opts out of the measure (`full` in Layout), where the column
-    genuinely is the page.
+    So it goes in `main`, and the width comes from a column rather than from a constant — the measure is
+    Tailwind's `max-w-7xl` and this file has no business knowing that. With no section on the page there
+    is no column to ask, and full width is right anyway: there is nothing to line up with.
   */
-  const zoneParent = root.querySelector<HTMLElement>('[data-content-column]') ?? root;
+  const zoneParent = root;
+  const measure = root.querySelector<HTMLElement>('[data-content-column]')?.getBoundingClientRect().width;
 
   const zone = document.createElement('div');
   zone.setAttribute(MARK, 'add-section');
@@ -431,6 +434,13 @@ export function paintCanvas(document: Document, canvas: Canvas): () => void {
   button.addEventListener('click', canvas.onAddSection);
 
   zone.append(button);
+  // Aligned with the content rather than with the window, so the zone describes a place a section can
+  // actually go. `auto` margins do nothing until there is a width to centre.
+  if (measure) {
+    zone.style.maxWidth = `${Math.round(measure)}px`;
+    zone.style.marginInline = 'auto';
+  }
+
   zoneParent.append(zone);
   undo.push(() => {
     button.removeEventListener('click', canvas.onAddSection);