Follow-up from #34 review.
The Graph-view zoom in Preview.svelte applies zoom: {level} to the inner .graph-zoom div. This gives us correct scroll-container bounds (the content actually grows/shrinks in layout), and it works in every current Tauri runtime (WebKit on macOS, Chromium WebView2 on Windows/Linux).
But zoom is non-standard. If we ever render the frontend outside a WebKit/Chromium webview (Firefox for dev testing, the site export, someone running bun run dev and hitting localhost:1420 in a non-Chromium browser), the visual scales but the scroll container sees the unscaled size — scrollbars end up wrong.
Fix
Feature-detect + fall back to transform: scale with manually-set container dimensions:
<div class="graph-zoom" style="--pg-zoom: {zoom}" bind:this={canvasEl}></div>
.graph-zoom {
zoom: var(--pg-zoom, 1);
}
@supports not (zoom: 2) {
.graph-zoom {
transform: scale(var(--pg-zoom, 1));
transform-origin: 0 0;
width: calc(100% / var(--pg-zoom, 1));
height: calc(100% / var(--pg-zoom, 1));
}
}
Caveat: transform: scale doesn't reflow and the container's reported size stays unscaled — we'd need viz.ts to expose the dagre-computed dims so we can compute scaled width/height explicitly. Fine, just more plumbing.
Follow-up from #34 review.
The Graph-view zoom in
Preview.svelteapplieszoom: {level}to the inner.graph-zoomdiv. This gives us correct scroll-container bounds (the content actually grows/shrinks in layout), and it works in every current Tauri runtime (WebKit on macOS, Chromium WebView2 on Windows/Linux).But
zoomis non-standard. If we ever render the frontend outside a WebKit/Chromium webview (Firefox for dev testing, the site export, someone runningbun run devand hittinglocalhost:1420in a non-Chromium browser), the visual scales but the scroll container sees the unscaled size — scrollbars end up wrong.Fix
Feature-detect + fall back to
transform: scalewith manually-set container dimensions:Caveat:
transform: scaledoesn't reflow and the container's reported size stays unscaled — we'd needviz.tsto expose the dagre-computed dims so we can compute scaledwidth/heightexplicitly. Fine, just more plumbing.