Refine tag page behavior

src/app/(static)/grid/page.tsx

@@ -30,10 +30,7 @@ export default async function GridPage({
     photos.length > 0
       ? <SiteGrid
         contentMain={<div className="space-y-4">
-          <PhotoGrid
-            photos={photos}
-            staggerOnFirstLoadOnly
-          />
+          <PhotoGrid photos={photos} />
           {showMorePhotos &&
             <MorePhotos path={`/grid?next=${offset + 1}`} />}
         </div>}

src/app/(static)/p/[photoId]/layout.tsx

@@ -88,7 +88,6 @@ export default async function PhotoPage({
         contentMain={<PhotoGrid
           photos={photosAfter.slice(1)}
           animateOnFirstLoadOnly
-          staggerOnFirstLoadOnly
         />}
         contentSide={<div className={cc(
           'grid grid-cols-2',

src/photo/PhotoGrid.tsx

@@ -13,7 +13,7 @@ export default function PhotoGrid({
   offset = 0,
   fast,
   animateOnFirstLoadOnly,
-  staggerOnFirstLoadOnly,
+  staggerOnFirstLoadOnly = true,
   showMore,
 }: {
   photos: Photo[]

src/tag/PhotoTag.tsx

@@ -11,10 +11,12 @@ export default function PhotoTag({
     <Link
       key={tag}
       href={pathForTag(tag)}
-      className="flex items-center gap-x-1.5"
+      className="flex items-center gap-x-2"
     >
+      <span className="uppercase">
+        {tag.replaceAll('-', ' ')}
+      </span>
       <FaTag size={11} />
-      <span className="uppercase">{tag.replaceAll('-', ' ')}</span>
     </Link>
   );
 }

src/tag/index.ts

@@ -5,7 +5,7 @@ export const pageTitleForTag = (tag: string) =>
   `${capitalizeWords(tag.replaceAll('-', ' '))} Photos`;
 
 export const ogTitleForTag = (tag: string) =>
-  `🏷️ ${tag.replaceAll('-', ' ').toUpperCase()}`;
+  `🏷️ ${capitalizeWords(tag.replaceAll('-', ' '))}`;
 
 export const descriptionForTaggedPhotos = (photos:Photo[]) =>
-  `${photos.length} ${photos.length === 1 ? 'photo' : 'photos'}`;
+  `${photos.length} tagged ${photos.length === 1 ? 'photo' : 'photos'}`;