From f17bc899c8421990beeed1cbc13616ee2fde87f7 Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Tue, 17 Mar 2026 09:59:04 -0500
Subject: [PATCH] Fix tall images cropped in lightbox

The wrapRef div had no dimensions, so max-w-full/max-h-full on the img
resolved against the image's own natural size rather than the available
space. Give wrapRef full width/height so percentage constraints work
correctly against the padded slot area.
---
 src/components/ImageGallery.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageGallery.tsx b/src/components/ImageGallery.tsx
index a55d007b..6a5a62d2 100644
--- a/src/components/ImageGallery.tsx
+++ b/src/components/ImageGallery.tsx
@@ -799,16 +799,15 @@ function LightboxImage({ url, isLoaded, onLoad, onSwipeBlocked }: {
       onMouseLeave={handleMouseUp}
       style={{ cursor: scale.current > 1 ? 'grab' : 'default' }}
     >
-      <div ref={wrapRef} style={{ transformOrigin: 'center center', willChange: 'transform' }}>
+      <div ref={wrapRef} style={{ transformOrigin: 'center center', willChange: 'transform', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
         <img
           ref={imgRef}
           src={src}
           alt=""
           className={cn(
-            'max-w-full max-h-full object-contain select-none transition-opacity duration-300',
+            'block max-w-full max-h-full object-contain select-none transition-opacity duration-300',
             isLoaded ? 'opacity-100' : 'opacity-0',
           )}
-          style={{ display: 'block', maxHeight: '100dvh' }}
           onLoad={handleLoaded}
           onError={onError}
           draggable={false}