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(() =>
{/* Photo grid */} @@ -77,6 +77,7 @@ export default function EntityHover({ )}
{/* Placeholder grid */} @@ -90,7 +91,10 @@ export default function EntityHover({ {Array.from({ length: photosToShow }).map((_, index) =>
)}
{/* Text guard */} @@ -133,6 +137,7 @@ export default function EntityHover({ , [ gridClass, + splitLayout, photosToShow, photos, header,