Add section goes at the end of the page, not inside the first one

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>
This commit is contained in:
2026-08-31 07:02:52 +01:00
co-authored by Claude Opus 5
parent 2ab9e78790
commit 48c744372b
+17 -7
View File
@@ -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);