Add baseline grid debugging to photo set headers

src/app/admin/baseline/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import DebugBaselineGridContainer from
-  '@/components/DebugBaselineGridContainer';
+import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid';
 import FieldSetWithStatus from '@/components/FieldSetWithStatus';
 import SiteGrid from '@/components/SiteGrid';
 import EntityLink from '@/components/primitives/EntityLink';
@@ -55,7 +54,7 @@ export default function ComponentsPage() {
             />
           </div>
         </h1>
-        <DebugBaselineGridContainer className="flex gap-8">
+        <DivDebugBaselineGrid className="flex gap-8">
           <div className="[&>*]:flex">
             <div>
               <LabeledIcon
@@ -188,7 +187,7 @@ export default function ComponentsPage() {
               </div>
             )}
           </div>
-        </DebugBaselineGridContainer>
+        </DivDebugBaselineGrid>
       </>}
     />
   );

src/components/DivDebugBaselineGrid.tsx

@@ -4,7 +4,7 @@ import { useAppState } from '@/state';
 import { clsx } from 'clsx/lite';
 import { ReactNode } from 'react';
 
-export default function DebugBaselineGridContainer({
+export default function DivDebugBaselineGrid({
   children,
   className,
 }: {

src/photo/PhotoLarge.tsx

@@ -18,8 +18,7 @@ import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation';
 import { sortTags } from '@/tag';
 import AdminPhotoMenu from '@/admin/AdminPhotoMenu';
 import { Suspense } from 'react';
-import DebugBaselineGridContainer from
-  '@/components/DebugBaselineGridContainer';
+import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid';
 
 export default function PhotoLarge({
   photo,
@@ -65,7 +64,7 @@ export default function PhotoLarge({
           priority={priority}
         />}
       contentSide={
-        <DebugBaselineGridContainer className={clsx(
+        <DivDebugBaselineGrid className={clsx(
           'relative',
           'sticky top-4 self-start -translate-y-1',
           'grid grid-cols-2 md:grid-cols-1',
@@ -155,7 +154,7 @@ export default function PhotoLarge({
               />
             </div>
           </div>
-        </DebugBaselineGridContainer>}
+        </DivDebugBaselineGrid>}
     />
   );
 };

src/photo/PhotoSetHeader.tsx

@@ -4,6 +4,7 @@ import ShareButton from '@/components/ShareButton';
 import AnimateItems from '@/components/AnimateItems';
 import { ReactNode } from 'react';
 import { HIGH_DENSITY_GRID } from '@/site/config';
+import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid';
 
 export default function PhotoSetHeader({
   entity,
@@ -35,7 +36,7 @@ export default function PhotoSetHeader({
       type="bottom"
       distanceOffset={10}
       animateOnFirstLoadOnly
-      items={[<div
+      items={[<DivDebugBaselineGrid
         key="PhotosHeader"
         className={clsx(
           'grid gap-0.5 sm:gap-1 items-start',
@@ -74,7 +75,7 @@ export default function PhotoSetHeader({
             ? start
             : <>{end}<br />– {start}</>}
         </span>
-      </div>]}
+      </DivDebugBaselineGrid>]}
     />
   );
 }