From deca3acacbf5de0859dcca23c65474dede131edb Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 1 Sep 2024 00:01:17 -0500
Subject: [PATCH] Refine spacing

---
 src/photo/PhotoDetailPage.tsx    |  2 +-
 src/photo/PhotoGridContainer.tsx |  2 +-
 src/photo/PhotoLarge.tsx         |  8 ++++++--
 src/photo/PhotoPrevNext.tsx      | 18 ++++++++++++------
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/photo/PhotoDetailPage.tsx b/src/photo/PhotoDetailPage.tsx
index e86e5f5e..ecfd14d7 100644
--- a/src/photo/PhotoDetailPage.tsx
+++ b/src/photo/PhotoDetailPage.tsx
@@ -85,7 +85,7 @@ export default function PhotoDetailPage({
   return (
     <div>
       <SiteGrid
-        className="mt-2 mb-6 sm:mb-8"
+        className="mt-1.5 mb-6"
         contentMain={customHeader ?? <PhotoHeader
           selectedPhoto={photo}
           photos={photos}
diff --git a/src/photo/PhotoGridContainer.tsx b/src/photo/PhotoGridContainer.tsx
index 0346c4b5..95ee522f 100644
--- a/src/photo/PhotoGridContainer.tsx
+++ b/src/photo/PhotoGridContainer.tsx
@@ -38,7 +38,7 @@ export default function PhotoGridContainer({
   return (
     <SiteGrid
       contentMain={<div className={clsx(
-        header && 'space-y-8 mt-2',
+        header && 'space-y-8 mt-1.5',
       )}>
         {header &&
           <AnimateItems
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index cba780a9..46b56f41 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -167,7 +167,11 @@ export default function PhotoLarge({
             </div>
             <div className="space-y-baseline">
               {photo.caption &&
-                <div className="uppercase">
+                <div className={clsx(
+                  'uppercase', 
+                  // Prevent collision with admin button
+                  isUserSignedIn && 'md:pr-7',
+                )}>
                   {photo.caption}
                 </div>}
               {(showCameraContent || showTagsContent) &&
@@ -233,7 +237,7 @@ export default function PhotoLarge({
                 photo={photo}
                 className={clsx(
                   'text-medium',
-                  // Prevent date collision with admin button
+                  // Prevent collision with admin button
                   !hasNonDateContent && isUserSignedIn && 'md:pr-7',
                 )}
               />
diff --git a/src/photo/PhotoPrevNext.tsx b/src/photo/PhotoPrevNext.tsx
index bf714327..37c276b0 100644
--- a/src/photo/PhotoPrevNext.tsx
+++ b/src/photo/PhotoPrevNext.tsx
@@ -101,10 +101,10 @@ export default function PhotoPrevNext({
       'flex items-center',
       className,
     )}>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 select-none">
         <PhotoLink
           photo={previousPhoto}
-          className="select-none"
+          className="select-none h-[1rem]"
           nextPhotoAnimation={ANIMATION_RIGHT}
           tag={tag}
           camera={camera}
@@ -113,13 +113,17 @@ export default function PhotoPrevNext({
           scroll={false}
           prefetch
         >
-          <FiChevronLeft className="sm:hidden text-[1.25rem]" />
+          <FiChevronLeft
+            className="sm:hidden text-[1.25rem] translate-y-[-1.5px]"
+          />
           <span className="hidden sm:inline-block">PREV</span>
         </PhotoLink>
-        <span className="text-extra-extra-dim">/</span>
+        <span className="text-extra-extra-dim">
+          /
+        </span>
         <PhotoLink
           photo={nextPhoto}
-          className="select-none"
+          className="select-none h-[1rem]"
           nextPhotoAnimation={ANIMATION_LEFT}
           tag={tag}
           camera={camera}
@@ -128,7 +132,9 @@ export default function PhotoPrevNext({
           scroll={false}
           prefetch
         >
-          <FiChevronRight className="sm:hidden text-[1.25rem]" />
+          <FiChevronRight
+            className="sm:hidden text-[1.25rem] translate-y-[-1.5px]"
+          />
           <span className="hidden sm:inline-block">NEXT</span>
         </PhotoLink>
       </div>