Apply zoom styles only when actively zoomed (preserves Gradio centering)

app.py

@@ -300,24 +300,31 @@ def choose(side: str, session: dict):
 # Shift+wheel zoom, drag-pan when zoomed, dbl-click reset. Pan is clamped so
 # the image always fills its container; max 4x. Resets on src change.
 ZOOM_HEAD = """
-<style>
-  .zoomable img {
-    transform-origin: 0 0;
-    transition: transform 0.05s ease-out;
-    will-change: transform;
-  }
-</style>
 <script>
 (function () {
   const MAX_SCALE = 10;
   function bind(img) {
     if (img.__zoomBound) return;
     img.__zoomBound = true;
-    // Clip on the immediate parent only; broader CSS selectors collapse
-    // Gradio's column layout for the A/B images.
-    if (img.parentElement) img.parentElement.style.overflow = 'hidden';
     let scale = 1, tx = 0, ty = 0;
     let dragging = false, lastX = 0, lastY = 0;
+    const parent = img.parentElement;
+
+    // Apply zoom styles only while actively zoomed; restoring them on reset
+    // lets Gradio's own positioning/centering work at scale=1.
+    function setZoomStyles(on) {
+      if (!parent) return;
+      if (on) {
+        parent.style.overflow = 'hidden';
+        img.style.transformOrigin = '0 0';
+        img.style.willChange = 'transform';
+      } else {
+        parent.style.overflow = '';
+        img.style.transformOrigin = '';
+        img.style.willChange = '';
+        img.style.transform = '';
+      }
+    }
     function clamp() {
       const w = img.clientWidth || img.naturalWidth || 1;
       const h = img.clientHeight || img.naturalHeight || 1;
@@ -325,10 +332,14 @@ ZOOM_HEAD = """
       tx = Math.min(0, Math.max(minX, tx));
       ty = Math.min(0, Math.max(minY, ty));
     }
-    const apply = () => { clamp(); img.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`; };
-    const reset = () => { scale = 1; tx = 0; ty = 0; img.style.transform = ''; };
+    const apply = () => {
+      setZoomStyles(true);
+      clamp();
+      img.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
+    };
+    const reset = () => { scale = 1; tx = 0; ty = 0; setZoomStyles(false); };
     img.addEventListener('wheel', (e) => {
-      if (!e.shiftKey) return;  // plain scroll = page scroll
+      if (!e.shiftKey) return;
       e.preventDefault();
       const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
       const ns = Math.min(MAX_SCALE, Math.max(1, scale * factor));