Merge branch 'fix/1293-production-zoom-scroll' into test-release/pr1295-workflow

Author: VanshajPoonia

frontend/src/components/Media/ImageViewer.tsx

@@ -18,11 +18,15 @@ export const ImageViewer = forwardRef<ImageViewerRef, ImageViewerProps>(
   ({ imagePath, alt, rotation, resetSignal }, ref) => {
     const zoomableImageRef = useRef<ZoomableImageRef>(null);
 
-    useImperativeHandle(ref, () => ({
-      zoomIn: () => zoomableImageRef.current?.zoomIn(),
-      zoomOut: () => zoomableImageRef.current?.zoomOut(),
-      reset: () => zoomableImageRef.current?.reset(),
-    }));
+    useImperativeHandle(
+      ref,
+      () => ({
+        zoomIn: () => zoomableImageRef.current?.zoomIn(),
+        zoomOut: () => zoomableImageRef.current?.zoomOut(),
+        reset: () => zoomableImageRef.current?.reset(),
+      }),
+      [],
+    );
 
     return (
       <ZoomableImage

frontend/src/components/Media/MediaThumbnails.tsx

@@ -1,5 +1,9 @@
 import React, { useRef, useEffect } from 'react';
 import { convertFileSrc } from '@tauri-apps/api/core';
+import {
+  PLACEHOLDER_IMAGE_SRC,
+  handlePlaceholderImageError,
+} from '@/utils/imageFallback';
 
 interface MediaThumbnailsProps {
   images: Array<{
@@ -117,14 +121,10 @@ export const MediaThumbnails: React.FC<MediaThumbnailsProps> = ({
             } cursor-pointer transition-all duration-200 hover:scale-105`}
           >
             <img
-              src={convertFileSrc(image.thumbnailPath) || '/placeholder.svg'}
+              src={convertFileSrc(image.thumbnailPath) || PLACEHOLDER_IMAGE_SRC}
               alt={`thumbnail-${index}`}
               className="h-full w-full object-cover"
-              onError={(e) => {
-                const img = e.target as HTMLImageElement;
-                img.onerror = null;
-                img.src = '/placeholder.svg';
-              }}
+              onError={handlePlaceholderImageError}
             />
           </div>
         ))}

frontend/src/components/Media/ZoomableImage.tsx

@@ -1,6 +1,10 @@
 import { useImperativeHandle, forwardRef } from 'react';
 import { convertFileSrc } from '@tauri-apps/api/core';
 import { useZoomTransform } from '@/hooks/useZoomTransform';
+import {
+  PLACEHOLDER_IMAGE_SRC,
+  handlePlaceholderImageError,
+} from '@/utils/imageFallback';
 
 interface ZoomableImageProps {
   imagePath: string;
@@ -35,11 +39,15 @@ export const ZoomableImage = forwardRef<ZoomableImageRef, ZoomableImageProps>(
       reset,
     } = useZoomTransform({ imagePath, rotation, resetSignal });
 
-    useImperativeHandle(ref, () => ({
-      zoomIn,
-      zoomOut,
-      reset,
-    }));
+    useImperativeHandle(
+      ref,
+      () => ({
+        zoomIn,
+        zoomOut,
+        reset,
+      }),
+      [zoomIn, zoomOut, reset],
+    );
 
     return (
       <div
@@ -75,26 +83,22 @@ export const ZoomableImage = forwardRef<ZoomableImageRef, ZoomableImageProps>(
           <img
             key={imagePath}
             ref={imageRef}
-            src={convertFileSrc(imagePath) || '/placeholder.svg'}
+            src={convertFileSrc(imagePath) || PLACEHOLDER_IMAGE_SRC}
             alt={alt}
             draggable={false}
-            className="select-none"
             onLoad={handleImageLoad}
-            onError={(e) => {
-              const img = e.target as HTMLImageElement;
-              img.onerror = null;
-              img.src = '/placeholder.svg';
-            }}
+            onError={handlePlaceholderImageError}
             style={{
               position: contentDimensions ? 'absolute' : 'relative',
               left: `${imageOffset.left}px`,
               top: `${imageOffset.top}px`,
               width: rawDimensions ? `${rawDimensions.width}px` : undefined,
               height: rawDimensions ? `${rawDimensions.height}px` : undefined,
+              // Override the framework's `img { max-width: 100% }` reset so the
+              // image can scale beyond the viewport while zoomed.
               maxWidth: 'none',
               maxHeight: 'none',
               objectFit: 'contain',
-              zIndex: 50,
               transform: `rotate(${rotation}deg)`,
               transformOrigin: 'center center',
               pointerEvents: 'none',