From dcc5df0a4041fd77b809953f651674c9c74c0414 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 1 Sep 2024 00:25:44 -0500
Subject: [PATCH] Refine photo header grid

---
 src/photo/PhotoHeader.tsx   | 18 ++++++++++--------
 src/photo/PhotoPrevNext.tsx |  4 ++--
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/photo/PhotoHeader.tsx b/src/photo/PhotoHeader.tsx
index 16544418..4a1780f6 100644
--- a/src/photo/PhotoHeader.tsx
+++ b/src/photo/PhotoHeader.tsx
@@ -72,14 +72,13 @@ export default function PhotoHeader({
       items={[<DivDebugBaselineGrid
         key="PhotosHeader"
         className={clsx(
-          'grid gap-0.5 sm:gap-1 items-start grid-cols-2',
+          'grid gap-0.5 sm:gap-1 items-start grid-cols-4',
           HIGH_DENSITY_GRID
-            ? 'sm:grid-cols-4 lg:grid-cols-5'
-            : 'sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
+            ? 'lg:grid-cols-5'
+            : 'md:grid-cols-3 lg:grid-cols-4',
         )}>
         <span className={clsx(
-          'inline-flex uppercase',
-          HIGH_DENSITY_GRID && 'sm:col-span-2',
+          'inline-flex uppercase col-span-2 md:col-span-1',
         )}>
           {entity ?? (
             (selectedPhoto?.title || SHOW_PHOTO_TITLE_FALLBACK_TEXT)
@@ -91,12 +90,12 @@ export default function PhotoHeader({
           )}
         </span>
         <span className={clsx(
-          'hidden sm:inline-flex',
+          'inline-flex',
           'gap-2 self-start',
           'uppercase text-dim',
           HIGH_DENSITY_GRID
             ? 'lg:col-span-2'
-            : 'sm:col-span-2 md:col-span-1 lg:col-span-2',
+            : 'lg:col-span-2',
         )}>
           {entity && <>
             {selectedPhotoIndex !== undefined
@@ -111,7 +110,10 @@ export default function PhotoHeader({
               />}
           </>}
         </span>
-        <div className="flex justify-end">
+        <div className={clsx(
+          selectedPhoto ? 'flex' : 'hidden sm:flex',
+          'justify-end',
+        )}>
           {selectedPhoto
             ? renderPrevNext()
             : renderDateRange()}
diff --git a/src/photo/PhotoPrevNext.tsx b/src/photo/PhotoPrevNext.tsx
index 37c276b0..1535b333 100644
--- a/src/photo/PhotoPrevNext.tsx
+++ b/src/photo/PhotoPrevNext.tsx
@@ -114,7 +114,7 @@ export default function PhotoPrevNext({
           prefetch
         >
           <FiChevronLeft
-            className="sm:hidden text-[1.25rem] translate-y-[-1.5px]"
+            className="sm:hidden text-[1.2rem] translate-y-[-1.5px]"
           />
           <span className="hidden sm:inline-block">PREV</span>
         </PhotoLink>
@@ -133,7 +133,7 @@ export default function PhotoPrevNext({
           prefetch
         >
           <FiChevronRight
-            className="sm:hidden text-[1.25rem] translate-y-[-1.5px]"
+            className="sm:hidden text-[1.2rem] translate-y-[-1.5px]"
           />
           <span className="hidden sm:inline-block">NEXT</span>
         </PhotoLink>