From b7eb946d184d34cf6d16ebc4db1f3cd4497b582e Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 25 Jan 2025 19:40:12 -0600
Subject: [PATCH] Refine matte layouts based on aspect ratio

---
 src/photo/PhotoLarge.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index d2357b35..59fc577a 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -115,6 +115,16 @@ export default function PhotoLarge({
       prefetch={prefetch}
     />;
 
+  const matteContentWidthForAspectRatio = () => {
+    // Restrict width for landscape photos
+    // (portrait photos are always height restricted)
+    if (photo.aspectRatio > 3 / 2 + 0.1) {
+      return 'w-[90%]';
+    } else if (photo.aspectRatio >= 1) {
+      return 'w-[80%]';
+    }
+  };
+
   return (
     <SiteGrid
       containerRef={ref}
@@ -123,16 +133,15 @@ export default function PhotoLarge({
         <Link
           href={pathForPhoto({ photo })}
           className={clsx(arePhotosMatted &&
-            'flex items-center aspect-[3/2] bg-gray-100',
+            'flex items-center justify-center aspect-[3/2] bg-gray-100',
           )}
           prefetch={prefetch}
         >
           <div className={clsx(
-            arePhotosMatted &&
-              'flex items-center justify-center w-full',
-            arePhotosMatted && photo.aspectRatio >= 1
-              ? 'h-[80%]'
-              : 'h-[90%]',
+            arePhotosMatted && 'flex items-center justify-center',
+            // Always specify height to ensure fallback doesn't collapse
+            arePhotosMatted && 'h-[90%]',
+            arePhotosMatted && matteContentWidthForAspectRatio(),
           )}>
             <ImageLarge
               className={clsx(arePhotosMatted && 'h-full')}