diff --git a/web/canvas.ts b/web/canvas.ts index 159b11b..bf2ff5d 100644 --- a/web/canvas.ts +++ b/web/canvas.ts @@ -213,25 +213,34 @@ export function paintCanvas(document: Document, canvas: Canvas): () => void { if (!element) continue; const previousPosition = element.style.position; - const previousMargin = element.style.margin; // `relative` so the label and the controls can be placed against this band rather than the page. element.style.position = 'relative'; - // Room for the outline and the label above it, so two bands in a row do not touch. Kept inline - // because it is layout and must hold whether or not anything is hovered — the outline itself is in - // the stylesheet, INSET, so a band filling the column never draws past the measure. - element.style.margin = '2.5rem 0'; + /* + NO margin. There was `2.5rem 0` here, to make room for the label above each band. + + That is 40 pixels above and below every section that the real page does not have, and it made the + preview overstate the spacing of every page in the site — on the one screen whose entire purpose + is to show what the page looks like. It was reported as "there is a lot more space between the + logo and the text in the admin", which is exactly what it was. + + A preview may draw ON the page. It may not CHANGE it. Everything this file adds is now either + absolutely positioned or an outline, both of which take no layout space, and the label moved + inside the band it names — see the bar below. + */ undo.push(() => { element.style.position = previousPosition; - element.style.margin = previousMargin; }); const bar = document.createElement('div'); bar.setAttribute(MARK, 'section-bar'); style(bar, [ 'position:absolute', - 'top:-1.75rem', + // INSIDE the band, not above it. Above needed 40px of margin the page does not have; the bar is + // hover-only, so overlaying the first line of a band for as long as the pointer is on it costs + // nothing and lying about the layout costs the preview its whole point. + 'top:0', 'left:0', 'right:0', 'display:flex',