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,18 +144,7 @@ export default function PhotoLarge({
     }
   };
 
-  return (
-    <SiteGrid
-      containerRef={ref}
-      className={className}
-      contentMain={
-        <Link
-          href={pathForPhoto({ photo })}
-          className={clsx(arePhotosMatted &&
-            'flex items-center justify-center aspect-[3/2] bg-gray-100',
-          )}
-          prefetch={prefetch}
-        >
+  const largePhotoContent =
     <div className={clsx(
       arePhotosMatted && 'flex items-center justify-center',
       // Always specify height to ensure fallback doesn't collapse
@@ -175,7 +167,26 @@ export default function PhotoLarge({
           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={showZoomControls
+        ? <div className={largePhotoContainerClassName}>
+          {largePhotoContent}
         </div>
+        : <Link
+          href={pathForPhoto({ photo })}
+          className={largePhotoContainerClassName}
+          prefetch={prefetch}
+        >
+          {largePhotoContent}
         </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;