Refine spacing

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}

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

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',
                 )}
               />

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>