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:
+17
-7
@@ -389,16 +389,19 @@ export function paintCanvas(document: Document, canvas: Canvas): () => void {
|
|||||||
|
|
||||||
// ── Add section, always last ─────────────────────────────────────────────────────────────────
|
// ── 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,
|
It used to be appended to the content column, which was one element wrapping every section. It is
|
||||||
the drop zone ran edge to edge and straight past the guides — describing a place a section could go
|
not one element any more: a built page is full-bleed so each band can draw a separator the width of
|
||||||
that no section will ever occupy.
|
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
|
So it goes in `main`, and the width comes from a column rather than from a constant — the measure is
|
||||||
genuinely is the page.
|
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');
|
const zone = document.createElement('div');
|
||||||
zone.setAttribute(MARK, 'add-section');
|
zone.setAttribute(MARK, 'add-section');
|
||||||
@@ -431,6 +434,13 @@ export function paintCanvas(document: Document, canvas: Canvas): () => void {
|
|||||||
button.addEventListener('click', canvas.onAddSection);
|
button.addEventListener('click', canvas.onAddSection);
|
||||||
|
|
||||||
zone.append(button);
|
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);
|
zoneParent.append(zone);
|
||||||
undo.push(() => {
|
undo.push(() => {
|
||||||
button.removeEventListener('click', canvas.onAddSection);
|
button.removeEventListener('click', canvas.onAddSection);
|
||||||
|
|||||||
Reference in New Issue
Block a user