From 1d0973bfd12fd5b7e9fa9a7568cb770a7264cb48 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 27 Sep 2025 21:33:39 -0500
Subject: [PATCH] Create custom layout for hovers with 3 images

---
 src/components/entity/EntityHover.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/entity/EntityHover.tsx b/src/components/entity/EntityHover.tsx
index 590184e5..532c0e0c 100644
--- a/src/components/entity/EntityHover.tsx
+++ b/src/components/entity/EntityHover.tsx
@@ -49,17 +49,15 @@ export default function EntityHover({
       return 6;
     } else if (photosCount >= 4) {
       return 4;
-    } else if (photosCount >= 2) {
-      return 2;
     } else {
-      return 1;
+      return photosCount;
     }
   }, [photosCount]);
 
   const gridClass = useMemo(() => {
     if (photosCount >= 6) {
       return 'grid-cols-3 grid-rows-2';
-    } else if (photosCount >= 4) {
+    } else if (photosCount >= 3) {
       return 'grid-cols-2 grid-rows-2';
     } else if (photosCount >= 2) {
       return 'grid-cols-2';
@@ -68,6 +66,8 @@ export default function EntityHover({
     }
   }, [photosCount]);
 
+  const splitLayout = photosCount === 3;
+
   const content = useMemo(() =>
     <div className="relative w-full h-full">
       {/* Photo grid */}
@@ -77,6 +77,7 @@ export default function EntityHover({
             <PhotoMedium
               key={photos[index].id}
               photo={photos[index]}
+              className={clsx(splitLayout && index === 0 && 'row-span-2')}
             />)}
       </div>
       {/* Placeholder grid */}
@@ -90,7 +91,10 @@ export default function EntityHover({
         {Array.from({ length: photosToShow }).map((_, index) =>
           <div
             key={index}
-            className="border-[0.5px] border-main"
+            className={clsx(
+              'border-[0.5px] border-main',
+              splitLayout && index === 0 && 'row-span-2',
+            )}
           />)}
       </div>
       {/* Text guard */}
@@ -133,6 +137,7 @@ export default function EntityHover({
     </div>
   , [
     gridClass,
+    splitLayout,
     photosToShow,
     photos,
     header,