Fix production zoom scroll behavior

backend/app/database/images.py

@@ -457,18 +457,22 @@ def db_toggle_image_favourite_status(image_id: str) -> bool:
     finally:
         conn.close()
 
+
 def db_get_image_by_id(image_id: str) -> Optional[dict]:
     """
     Get a single image by ID with its favorite status.
     """
     conn = _connect()
     cursor = conn.cursor()
     try:
-        cursor.execute("""
+        cursor.execute(
+            """
             SELECT id, path, folder_id, thumbnailPath, metadata, isTagged, isFavourite
             FROM images
             WHERE id = ?
-        """, (image_id,))
+        """,
+            (image_id,),
+        )
         row = cursor.fetchone()
         if not row:
             return None
@@ -488,6 +492,7 @@ def db_get_image_by_id(image_id: str) -> Optional[dict]:
     finally:
         conn.close()
 
+
 # ============================================================================
 # MEMORIES FEATURE - Location and Time-based Queries
 # ============================================================================

backend/app/routes/images.py

@@ -106,15 +106,15 @@ def toggle_favourite(req: ToggleFavouriteRequest):
         success = db_toggle_image_favourite_status(image_id)
         if not success:
             raise HTTPException(
-                status_code=status.HTTP_404_NOT_FOUND, 
-                detail="Image not found or failed to toggle"
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="Image not found or failed to toggle",
             )
         # Fetch updated status to return
         image = db_get_image_by_id(image_id)
         if not image:
             raise HTTPException(
-                status_code=status.HTTP_404_NOT_FOUND, 
-                detail="Image not found after toggle"
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="Image not found after toggle",
             )
         return {
             "success": True,
@@ -126,10 +126,11 @@ def toggle_favourite(req: ToggleFavouriteRequest):
     except Exception as e:
         logger.error(f"error in /toggle-favourite route: {e}")
         raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, 
-            detail=f"Internal server error: {e}"
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail=f"Internal server error: {e}",
         )
 
+
 class ImageInfoResponse(BaseModel):
     id: str
     path: str

frontend/src/components/Media/MediaView.tsx

@@ -51,20 +51,25 @@ export function MediaView({
 
   // Custom hooks
   const { viewState, handlers } = useImageViewControls();
+  const resetViewerState = useCallback(() => {
+    handlers.resetZoom();
+    setResetSignal((s) => s + 1);
+  }, [handlers]);
+
   // Navigation handlers
   const handleNextImage = useCallback(() => {
     if (currentViewIndex < images.length - 1) {
       dispatch(setCurrentViewIndex(currentViewIndex + 1));
-      handlers.resetZoom();
+      resetViewerState();
     }
-  }, [dispatch, handlers, currentViewIndex, images.length]);
+  }, [dispatch, resetViewerState, currentViewIndex, images.length]);
 
   const handlePreviousImage = useCallback(() => {
     if (currentViewIndex > 0) {
       dispatch(setCurrentViewIndex(currentViewIndex - 1));
-      handlers.resetZoom();
+      resetViewerState();
     }
-  }, [dispatch, handlers, currentViewIndex]);
+  }, [dispatch, resetViewerState, currentViewIndex]);
 
   const handleClose = useCallback(() => {
     dispatch(closeImageView());
@@ -74,9 +79,9 @@ export function MediaView({
   const handleThumbnailClick = useCallback(
     (index: number) => {
       dispatch(setCurrentViewIndex(index));
-      handlers.resetZoom();
+      resetViewerState();
     },
-    [dispatch, handlers],
+    [dispatch, resetViewerState],
   );
 
   const location = useLocation();
@@ -85,8 +90,8 @@ export function MediaView({
   // Loop to first image handler for slideshow
   const handleLoopToStart = useCallback(() => {
     dispatch(setCurrentViewIndex(0));
-    handlers.resetZoom();
-  }, [dispatch, handlers]);
+    resetViewerState();
+  }, [dispatch, resetViewerState]);
 
   // Slideshow functionality
   const { isSlideshowActive, toggleSlideshow } = useSlideshow(
@@ -142,9 +147,8 @@ export function MediaView({
 
   const handleResetZoom = useCallback(() => {
     imageViewerRef.current?.reset();
-    handlers.resetZoom();
-    setResetSignal((s) => s + 1);
-  }, [handlers]);
+    resetViewerState();
+  }, [resetViewerState]);
 
   // Keyboard navigation
   useKeyboardNavigation({
@@ -164,6 +168,7 @@ export function MediaView({
 
   // Safe variables
   const currentImagePath = currentImage.path;
+  const currentImageKey = currentImage.id || currentImage.path;
   // console.log(currentImage);
   const currentImageAlt = `image-${currentViewIndex}`;
   return (
@@ -190,6 +195,7 @@ export function MediaView({
       >
         {type === 'image' && (
           <ImageViewer
+            key={currentImageKey}
             ref={imageViewerRef}
             imagePath={currentImagePath}
             alt={currentImageAlt}