Refine matte layouts based on aspect ratio

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 &&
+            arePhotosMatted && 'flex items-center justify-center',
-              'flex items-center justify-center w-full',
+            // Always specify height to ensure fallback doesn't collapse
-            arePhotosMatted && photo.aspectRatio >= 1
+            arePhotosMatted && 'h-[90%]',
-              ? 'h-[80%]'
+            arePhotosMatted && matteContentWidthForAspectRatio(),
-              : 'h-[90%]',
           )}>
             <ImageLarge
               className={clsx(arePhotosMatted && 'h-full')}