Lightbox zoom improvements

stylesheets/components/Lightbox.scss

@@ -99,16 +99,9 @@
     max-width: 100%;
     object-fit: contain;
     outline: none;
-    padding: 0 40px;
     width: auto;
   }
 
-  &__object--container--fill &__object {
-    height: 100%;
-    padding: 0;
-    width: 100%;
-  }
-
   &__unsupported {
     @include button-reset;
     flex-grow: 1;
@@ -139,6 +132,7 @@
   &__zoom-button {
     @include button-reset;
     cursor: zoom-in;
+    margin: 0 40px;
   }
 
   &__object--container--zoom,

ts/components/Lightbox.tsx

@@ -281,7 +281,10 @@ export function Lightbox({
         return;
       }
 
-      const { screenWidth, screenHeight } = zoomCache;
+      const { maxX, maxY, screenWidth, screenHeight } = zoomCache;
+
+      const shouldTranslateX = maxX * ZOOM_SCALE > screenWidth;
+      const shouldTranslateY = maxY * ZOOM_SCALE > screenHeight;
 
       const offsetX = screenWidth / 2 - ev.clientX;
       const offsetY = screenHeight / 2 - ev.clientY;
@@ -291,8 +294,8 @@ export function Lightbox({
 
       springApi.start({
         scale: ZOOM_SCALE,
-        translateX: x,
-        translateY: y,
+        translateX: shouldTranslateX ? x : undefined,
+        translateY: shouldTranslateY ? y : undefined,
       });
     },
     [maxBoundsLimiter, springApi]
@@ -349,13 +352,21 @@ export function Lightbox({
       }
 
       if (!isZoomed) {
+        const maxX = imageNode.offsetWidth;
+        const maxY = imageNode.offsetHeight;
+        const screenHeight = window.innerHeight;
+        const screenWidth = window.innerWidth;
+
         zoomCacheRef.current = {
-          maxX: imageNode.offsetWidth,
-          maxY: imageNode.offsetHeight,
-          screenHeight: window.innerHeight,
-          screenWidth: window.innerWidth,
+          maxX,
+          maxY,
+          screenHeight,
+          screenWidth,
         };
 
+        const shouldTranslateX = maxX * ZOOM_SCALE > screenWidth;
+        const shouldTranslateY = maxY * ZOOM_SCALE > screenHeight;
+
         const { height, left, top, width } =
           animateNode.getBoundingClientRect();
 
@@ -367,8 +378,8 @@ export function Lightbox({
 
         springApi.start({
           scale: ZOOM_SCALE,
-          translateX: x,
-          translateY: y,
+          translateX: shouldTranslateX ? x : undefined,
+          translateY: shouldTranslateY ? y : undefined,
         });
 
         setIsZoomed(true);