Disable zoom F key listener on root

src/components/image/useImageZoomControls.ts

@@ -9,6 +9,7 @@ const EVENT_KEYDOWN = 'keydown';
 export default function useImageZoomControls(
   imageRef: RefObject<HTMLDivElement | null>,
   isEnabled?: boolean,
+  shouldExpandOnFKeydown?: boolean,
 ) {
   const viewerRef = useRef<Viewer | null>(null);
 
@@ -67,10 +68,14 @@ export default function useImageZoomControls(
 
   // On 'F' keydown, toggle fullscreen
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    if (!isCommandKOpen && e.key.toUpperCase() === 'F') {
+    if (
+      shouldExpandOnFKeydown &&
+      !isCommandKOpen &&
+      e.key.toUpperCase() === 'F'
+    ) {
       viewerRef.current?.show();
     }
-  }, [isCommandKOpen]);
+  }, [shouldExpandOnFKeydown, isCommandKOpen]);
   useEffect(() => {
     document.addEventListener(EVENT_KEYDOWN, handleKeyDown);
     return () => {

src/photo/PhotoLarge.tsx

@@ -53,6 +53,7 @@ export default function PhotoLarge({
   showCamera = true,
   showSimulation = true,
   showZoomControls: showZoomControlsProp = true,
+  shouldZoomOnFKeydown = true,
   shouldShare = true,
   shouldShareTag,
   shouldShareCamera,
@@ -73,6 +74,7 @@ export default function PhotoLarge({
   showCamera?: boolean
   showSimulation?: boolean
   showZoomControls?: boolean
+  shouldZoomOnFKeydown?: boolean
   shouldShare?: boolean
   shouldShareTag?: boolean
   shouldShareCamera?: boolean
@@ -105,6 +107,7 @@ export default function PhotoLarge({
   const { open } = useImageZoomControls(
     refZoomControlsContainer,
     showZoomControls,
+    shouldZoomOnFKeydown,
   );
 
   const hasTitle =
@@ -141,41 +144,49 @@ export default function PhotoLarge({
     }
   };
 
+  const largePhotoContent =
+    <div className={clsx(
+      arePhotosMatted && 'flex items-center justify-center',
+      // Always specify height to ensure fallback doesn't collapse
+      arePhotosMatted && 'h-[90%]',
+      arePhotosMatted && matteContentWidthForAspectRatio(),
+    )}>
+      <div
+        ref={refZoomControlsContainer}
+        className={clsx(showZoomControls && 'cursor-zoom-in')}
+      >
+        <ImageLarge
+          className={clsx(arePhotosMatted && 'h-full')}
+          imgClassName={clsx(arePhotosMatted &&
+            'object-contain w-full h-full')}
+          alt={altTextForPhoto(photo)}
+          src={photo.url}
+          aspectRatio={photo.aspectRatio}
+          blurDataURL={photo.blurData}
+          blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
+          priority={priority}
+        />
+      </div>
+    </div>;
+
+  const largePhotoContainerClassName = clsx(arePhotosMatted &&
+    'flex items-center justify-center aspect-[3/2] bg-gray-100',
+  );
+
   return (
     <SiteGrid
       containerRef={ref}
       className={className}
-      contentMain={
+      contentMain={showZoomControls
-        <Link
+        ? <div className={largePhotoContainerClassName}>
+          {largePhotoContent}
+        </div>
+        : <Link
           href={pathForPhoto({ photo })}
-          className={clsx(arePhotosMatted &&
+          className={largePhotoContainerClassName}
-            'flex items-center justify-center aspect-[3/2] bg-gray-100',
-          )}
           prefetch={prefetch}
         >
-          <div className={clsx(
+          {largePhotoContent}
-            arePhotosMatted && 'flex items-center justify-center',
-            // Always specify height to ensure fallback doesn't collapse
-            arePhotosMatted && 'h-[90%]',
-            arePhotosMatted && matteContentWidthForAspectRatio(),
-          )}>
-            <div
-              ref={refZoomControlsContainer}
-              className={clsx(showZoomControls && 'cursor-zoom-in')}
-            >
-              <ImageLarge
-                className={clsx(arePhotosMatted && 'h-full')}
-                imgClassName={clsx(arePhotosMatted &&
-                  'object-contain w-full h-full')}
-                alt={altTextForPhoto(photo)}
-                src={photo.url}
-                aspectRatio={photo.aspectRatio}
-                blurDataURL={photo.blurData}
-                blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
-                priority={priority}
-              />
-            </div>
-          </div>
         </Link>}
       contentSide={
         <DivDebugBaselineGrid className={clsx(

src/photo/PhotosLarge.tsx

@@ -31,6 +31,7 @@ export default function PhotosLarge({
           priority={index <= 1}
           prefetchRelatedLinks={prefetchFirstPhotoLinks && index === 0}
           revalidatePhoto={revalidatePhoto}
+          shouldZoomOnFKeydown={false}
           onVisible={index === photos.length - 1
             ? onLastPhotoVisible
             : undefined}

src/site/viewerjs.css

@@ -43,7 +43,7 @@
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  padding: 2rem 0.25rem;
+  padding: 0rem 0.25rem 2rem 0.25rem;
 }
 .viewer-toolbar > ul > li {
   display: flex;