Fix slide overflowing into letterbox

biome.json

@@ -1,5 +1,5 @@
 {
-    "$schema": "https://biomejs.dev/schemas/2.5.9/schema.json",
+    "$schema": "https://biomejs.dev/schemas/2.5.14/schema.json",
     "vcs": {
         "enabled": true,
         "clientKind": "git",

src/css/presenter/base.css

@@ -46,10 +46,14 @@ body {
     height: 100%;
 }
 
+/* Sized in px by transitions.ts' fitSlideToStage() so overflow:hidden clips
+   exactly to the slide's aspect ratio; max-width/max-height are a no-JS
+   fallback. */
 #stage > svg,
 #stage > :first-child {
-    width: 100%;
-    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
 }
 
 #statusbar {

src/css/presenter/sync.css

@@ -12,14 +12,14 @@
 .sync-glyph .arrow-down {
     transition: opacity 0.12s;
 }
-#btn-sync[data-mode="present"] .arrow-down,
-#btn-sync[data-mode="follow"] .arrow-up,
-#btn-sync[data-mode="solo"] .arrow-up,
-#btn-sync[data-mode="solo"] .arrow-down,
 .sync-row[data-mode="present"] .arrow-down,
 .sync-row[data-mode="follow"] .arrow-up,
 .sync-row[data-mode="solo"] .arrow-up,
-.sync-row[data-mode="solo"] .arrow-down {
+.sync-row[data-mode="solo"] .arrow-down,
+#btn-sync[data-mode="present"] .arrow-down,
+#btn-sync[data-mode="follow"] .arrow-up,
+#btn-sync[data-mode="solo"] .arrow-up,
+#btn-sync[data-mode="solo"] .arrow-down {
     opacity: 0.28;
 }
 

src/inkflow/bundles/presenter.css

@@ -74,8 +74,9 @@ body {
 }
 #stage > svg,
 #stage > :first-child {
-  width: 100%;
-  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
 }
 #statusbar {
   position: relative;
@@ -725,14 +726,14 @@ kbd {
 .sync-glyph .arrow-down {
   transition: opacity 0.12s;
 }
-#btn-sync[data-mode=present] .arrow-down,
-#btn-sync[data-mode=follow] .arrow-up,
-#btn-sync[data-mode=solo] .arrow-up,
-#btn-sync[data-mode=solo] .arrow-down,
 .sync-row[data-mode=present] .arrow-down,
 .sync-row[data-mode=follow] .arrow-up,
 .sync-row[data-mode=solo] .arrow-up,
-.sync-row[data-mode=solo] .arrow-down {
+.sync-row[data-mode=solo] .arrow-down,
+#btn-sync[data-mode=present] .arrow-down,
+#btn-sync[data-mode=follow] .arrow-up,
+#btn-sync[data-mode=solo] .arrow-up,
+#btn-sync[data-mode=solo] .arrow-down {
   opacity: 0.28;
 }
 #sync-menu {

src/inkflow/bundles/presenter.js

@@ -2598,22 +2598,42 @@
   function snapInflight() {
     cancelInflight(true);
     stage3.innerHTML = state.slides.length ? state.slides[state.slideIndex].svg : '<p style="color:var(--accent);padding:2rem">No slides.</p>';
+    fitSlideToStage(stage3.firstElementChild);
     applyCurrentStepInstant();
     updateStatus();
   }
+  var fittedSlides = /* @__PURE__ */ new Set();
+  function fitSlideToStage(el) {
+    for (const tracked of fittedSlides) {
+      if (!tracked.isConnected) fittedSlides.delete(tracked);
+    }
+    if (!(el instanceof SVGSVGElement)) return;
+    fittedSlides.add(el);
+    refit(el);
+  }
+  function refit(el) {
+    const parent = el.parentElement;
+    if (!parent) return;
+    const vb = parseViewBox(el.getAttribute("viewBox"));
+    const parentStyle = getComputedStyle(parent);
+    const availWidth = parent.clientWidth - Number.parseFloat(parentStyle.paddingLeft) - Number.parseFloat(parentStyle.paddingRight);
+    const availHeight = parent.clientHeight - Number.parseFloat(parentStyle.paddingTop) - Number.parseFloat(parentStyle.paddingBottom);
+    const scale = Math.min(availWidth / vb.w, availHeight / vb.h);
+    el.style.width = `${vb.w * scale}px`;
+    el.style.height = `${vb.h * scale}px`;
+  }
+  new ResizeObserver(() => {
+    for (const el of fittedSlides) {
+      if (el.isConnected) refit(el);
+      else fittedSlides.delete(el);
+    }
+  }).observe(stage3);
   function makeLayer() {
     const layer = document.createElement("div");
     layer.style.cssText = "position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none";
     layer.style.padding = getComputedStyle(stage3).padding;
     return layer;
   }
-  function sizeLayerChild(layer) {
-    const child = layer.firstElementChild;
-    if (child) {
-      child.style.width = "100%";
-      child.style.height = "100%";
-    }
-  }
   function dirAxis(dir) {
     return dir === "up" || dir === "down" ? "Y" : "X";
   }
@@ -2687,12 +2707,12 @@
       this.settled = false;
       const newLayer = makeLayer();
       while (stage3.firstChild) newLayer.appendChild(stage3.firstChild);
-      sizeLayerChild(newLayer);
+      fitSlideToStage(newLayer.firstElementChild);
       stage3.appendChild(newLayer);
       this.newLayer = newLayer;
       const oldLayer = makeLayer();
       oldLayer.innerHTML = this.outgoingHtml;
-      sizeLayerChild(oldLayer);
+      fitSlideToStage(oldLayer.firstElementChild);
       stage3.appendChild(oldLayer);
       this.oldLayer = oldLayer;
     }
@@ -2765,7 +2785,7 @@
     rect.setAttribute("fill", color);
     svg.appendChild(rect);
     layer.appendChild(svg);
-    sizeLayerChild(layer);
+    fitSlideToStage(layer.firstElementChild);
     return layer;
   }
   var fadeRender = ({ stage: stageElement, oldLayer, newLayer }, progress, params) => {
@@ -2823,6 +2843,7 @@
     } : settleContent;
     const swap = () => {
       stage3.innerHTML = state.slides.length ? state.slides[state.slideIndex].svg : '<p style="color:var(--accent);padding:2rem">No slides.</p>';
+      fitSlideToStage(stage3.firstElementChild);
       initialLand();
     };
     const canReverse = liveInstance?.reverse != null && liveParams != null && liveParams.type === params.type && Boolean(liveParams.reverse) !== Boolean(params.reverse);

src/ts/presenter/transitions.ts

@@ -136,10 +136,53 @@ export function snapInflight(): void {
     stage.innerHTML = state.slides.length
         ? state.slides[state.slideIndex].svg
         : '<p style="color:var(--accent);padding:2rem">No slides.</p>';
+    fitSlideToStage(stage.firstElementChild);
     applyCurrentStepInstant();
     updateStatus();
 }
 
+// ── Slide fitting ────────────────────────────────────────────────────────────
+
+// Sizes a mounted slide's box in pixels from its own viewBox, so
+// `overflow: hidden` clips exactly at its "meet" content instead of a bigger
+// box that lets off-viewBox elements show past the letterboxing. Refitted
+// whenever the container size changes (resize, fullscreen, sidebar toggle).
+const fittedSlides = new Set<SVGSVGElement>();
+
+function fitSlideToStage(el: Element | null): void {
+    for (const tracked of fittedSlides) {
+        if (!tracked.isConnected) fittedSlides.delete(tracked);
+    }
+    if (!(el instanceof SVGSVGElement)) return;
+    fittedSlides.add(el);
+    refit(el);
+}
+
+function refit(el: SVGSVGElement): void {
+    const parent = el.parentElement;
+    if (!parent) return;
+    const vb = parseViewBox(el.getAttribute("viewBox"));
+    const parentStyle = getComputedStyle(parent);
+    const availWidth =
+        parent.clientWidth -
+        Number.parseFloat(parentStyle.paddingLeft) -
+        Number.parseFloat(parentStyle.paddingRight);
+    const availHeight =
+        parent.clientHeight -
+        Number.parseFloat(parentStyle.paddingTop) -
+        Number.parseFloat(parentStyle.paddingBottom);
+    const scale = Math.min(availWidth / vb.w, availHeight / vb.h);
+    el.style.width = `${vb.w * scale}px`;
+    el.style.height = `${vb.h * scale}px`;
+}
+
+new ResizeObserver(() => {
+    for (const el of fittedSlides) {
+        if (el.isConnected) refit(el);
+        else fittedSlides.delete(el);
+    }
+}).observe(stage);
+
 // ── Layer helpers ─────────────────────────────────────────────────────────────
 
 // A transition layer is an absolutely-positioned div the size of the stage.
@@ -153,14 +196,6 @@ function makeLayer(): HTMLDivElement {
     return layer;
 }
 
-function sizeLayerChild(layer: HTMLDivElement): void {
-    const child = layer.firstElementChild as HTMLElement | null;
-    if (child) {
-        child.style.width = "100%";
-        child.style.height = "100%";
-    }
-}
-
 // ── Direction helpers ─────────────────────────────────────────────────────────
 
 type Axis = "X" | "Y";
@@ -271,13 +306,13 @@ class ProgressTransition implements Transition {
         this.settled = false;
         const newLayer = makeLayer();
         while (stage.firstChild) newLayer.appendChild(stage.firstChild);
-        sizeLayerChild(newLayer);
+        fitSlideToStage(newLayer.firstElementChild);
         stage.appendChild(newLayer);
         this.newLayer = newLayer;
 
         const oldLayer = makeLayer();
         oldLayer.innerHTML = this.outgoingHtml;
-        sizeLayerChild(oldLayer);
+        fitSlideToStage(oldLayer.firstElementChild);
         stage.appendChild(oldLayer);
         this.oldLayer = oldLayer;
     }
@@ -383,7 +418,7 @@ function makeFadeBackdrop(
     rect.setAttribute("fill", color);
     svg.appendChild(rect);
     layer.appendChild(svg);
-    sizeLayerChild(layer);
+    fitSlideToStage(layer.firstElementChild);
     return layer;
 }
 
@@ -517,6 +552,7 @@ function loadSlideBody(
         stage.innerHTML = state.slides.length
             ? state.slides[state.slideIndex].svg
             : '<p style="color:var(--accent);padding:2rem">No slides.</p>';
+        fitSlideToStage(stage.firstElementChild);
         initialLand();
     };