From 3918d5b8d26b2d7d56ee251c42a7ad4f1fc8aff6 Mon Sep 17 00:00:00 2001 From: Aleksey Shakhmatov Date: Fri, 22 May 2026 20:41:09 +0300 Subject: [PATCH] fix(preview): keep diagram centred in split view MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit After pinning the SVG to its intrinsic size, the stage's layout box is often wider than a narrow (split) canvas. CSS grid centring doesn't centre an oversized item — it anchored the stage's left edge to the canvas, pushing the transform-origin (and the scaled-down diagram) far to the right. Centre the stage with absolute positioning at left/top 50% plus a translate(-50%,-50%) prefix on the transform, so centring is independent of the unscaled size. The grid still centres the empty/error messages. Verified the diagram and the placeholder sit at offset 0 in a 691px split pane. --- src/lib/components/Preview.svelte | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/lib/components/Preview.svelte b/src/lib/components/Preview.svelte index e7f5a67..42a0bbe 100644 --- a/src/lib/components/Preview.svelte +++ b/src/lib/components/Preview.svelte @@ -188,7 +188,7 @@ class="stage" class:paper={store.theme !== 'dark'} class:animate - style="transform: translate({pan.x}px, {pan.y}px) scale({zoom});" + style="transform: translate(-50%, -50%) translate({pan.x}px, {pan.y}px) scale({zoom});" > {@html svg} @@ -263,6 +263,9 @@ } .canvas { height: 100%; + /* `position: relative` makes this the containing block for the absolutely + centred .stage; the grid still centres the empty/error messages. */ + position: relative; display: grid; place-items: center; overflow: hidden; @@ -274,6 +277,12 @@ cursor: grabbing; } .stage { + /* Centre via the canvas centre regardless of the (unscaled) stage size — + grid centring left an oversized stage anchored off to the right. The + transform prepends translate(-50%, -50%) to recentre it. */ + position: absolute; + left: 50%; + top: 50%; transform-origin: center center; /* Promote to its own compositor layer so panning doesn't ghost/stutter. No transition by default → drag-pan and pinch track the input 1:1. */