From 42a3a5331495072c7f309f94d500ad4c812fe81a Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 26 Oct 2025 02:52:26 +0200
Subject: [PATCH] panning

---
 frontend/src/detail/DetailPanel.jsx | 33 ++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index 1ded293..4207e86 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -990,6 +990,33 @@ const DetailPanel = ({
     [endZoomDrag],
   );
 
+  const handleZoomStageWheel = useCallback(
+    (event) => {
+      if (!zoomNative) {
+        return;
+      }
+      const deltaX = Number.isFinite(event.deltaX) ? event.deltaX : 0;
+      const deltaY = Number.isFinite(event.deltaY) ? event.deltaY : 0;
+      if (!deltaX && !deltaY) {
+        return;
+      }
+      let updated = false;
+      setZoomPan((current) => {
+        const clamped = clampPan(current.x - deltaX, current.y - deltaY);
+        if (clamped.x === current.x && clamped.y === current.y) {
+          return current;
+        }
+        updated = true;
+        return clamped;
+      });
+      if (updated) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [zoomNative, clampPan],
+  );
+
   const zoomDisplay = useMemo(() => {
     if (!zoomedPreview) {
       return null;
@@ -1644,7 +1671,11 @@ const DetailPanel = ({
               aria-label="Enlarged document preview"
               onClick={closeZoomPreview}
             >
-              <div ref={zoomStageRef} className={zoomStageClassName}>
+              <div
+                ref={zoomStageRef}
+                className={zoomStageClassName}
+                onWheel={handleZoomStageWheel}
+              >
                 <img
                   src={zoomDisplay.url}
                   alt={zoomDisplay.alt}