From 704df818f127f4c9283b6f650d0c20dfcb684415 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 13 Mar 2025 23:25:54 -0500
Subject: [PATCH] Enhancements for non-fixed aspect ratios

---
 src/components/index.ts          | 9 +++++++++
 src/photo/PhotoGrid.tsx          | 6 ++++--
 src/photo/PhotoGridContainer.tsx | 3 ++-
 src/photo/PhotoHeader.tsx        | 7 +++++--
 4 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 src/components/index.ts

diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 00000000..d0b0465f
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,9 @@
+import { GRID_ASPECT_RATIO } from '@/app/config';
+
+export const GRID_GAP_CLASSNAME = GRID_ASPECT_RATIO === 0
+  ? 'gap-1 sm:gap-2'
+  : 'gap-0.5 sm:gap-1';
+
+export const GRID_SPACE_CLASSNAME = GRID_ASPECT_RATIO === 0
+  ? 'space-y-1 sm:space-y-2'
+  : 'space-y-0.5 sm:space-y-1';
diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx
index 64f9c8a9..117bfc1d 100644
--- a/src/photo/PhotoGrid.tsx
+++ b/src/photo/PhotoGrid.tsx
@@ -9,6 +9,7 @@ import { GRID_ASPECT_RATIO } from '@/app/config';
 import { useAppState } from '@/state/AppState';
 import SelectTileOverlay from '@/components/SelectTileOverlay';
 import { ReactNode } from 'react';
+import { GRID_GAP_CLASSNAME } from '@/components';
 
 export default function PhotoGrid({
   photos,
@@ -54,7 +55,8 @@ export default function PhotoGrid({
   return (
     <AnimateItems
       className={clsx(
-        'grid gap-0.5 sm:gap-1',
+        'grid',
+        GRID_GAP_CLASSNAME,
         small
           ? 'grid-cols-3 xs:grid-cols-6'
           : isGridHighDensity
@@ -75,7 +77,7 @@ export default function PhotoGrid({
         return <div
           key={photo.id}
           className={clsx(
-            GRID_ASPECT_RATIO !== 0 && 'flex relative overflow-hidden',
+            'flex relative overflow-hidden',
             'group',
           )}
           style={{
diff --git a/src/photo/PhotoGridContainer.tsx b/src/photo/PhotoGridContainer.tsx
index fbc403f6..f6b01ab0 100644
--- a/src/photo/PhotoGridContainer.tsx
+++ b/src/photo/PhotoGridContainer.tsx
@@ -6,6 +6,7 @@ import PhotoGridInfinite from './PhotoGridInfinite';
 import { clsx } from 'clsx/lite';
 import AnimateItems from '@/components/AnimateItems';
 import { ComponentProps, useCallback, useState, ReactNode } from 'react';
+import { GRID_SPACE_CLASSNAME } from '@/components';
 
 export default function PhotoGridContainer({
   cacheKey,
@@ -45,7 +46,7 @@ export default function PhotoGridContainer({
             items={[header]}
             animateOnFirstLoadOnly
           />}
-        <div className="space-y-0.5 sm:space-y-1">
+        <div className={GRID_SPACE_CLASSNAME}>
           <PhotoGrid {...{
             photos,
             tag,
diff --git a/src/photo/PhotoHeader.tsx b/src/photo/PhotoHeader.tsx
index 41880c49..1c173cea 100644
--- a/src/photo/PhotoHeader.tsx
+++ b/src/photo/PhotoHeader.tsx
@@ -16,6 +16,7 @@ import PhotoPrevNext from './PhotoPrevNext';
 import PhotoLink from './PhotoLink';
 import ResponsiveText from '@/components/primitives/ResponsiveText';
 import { useAppState } from '@/state/AppState';
+import { GRID_GAP_CLASSNAME } from '@/components';
 
 export default function PhotoHeader({
   tag,
@@ -76,7 +77,7 @@ export default function PhotoHeader({
     <span className="text-dim uppercase text-right">
       {start === end
         ? start
-        : <>{end}<br />– {start}</>}
+        : <>{end}<br />&ndash; {start}</>}
     </span>;
 
   const renderContentA = () => entity ?? (
@@ -96,7 +97,9 @@ export default function PhotoHeader({
       items={[<DivDebugBaselineGrid
         key="PhotosHeader"
         className={clsx(
-          'grid gap-0.5 sm:gap-1 items-start',
+          'grid',
+          GRID_GAP_CLASSNAME,
+          'items-start',
           'grid-cols-4',
           isGridHighDensity
             ? 'lg:grid-cols-6'