Refine entity links, photo set headers

src/camera/PhotoCamera.tsx

@@ -32,13 +32,13 @@ export default function PhotoCamera({
           title="Apple"
           className={cc(
             'text-icon',
-            'translate-x-[-2.5px] translate-y-[-2px]',
+            'translate-x-[-2.5px] translate-y-[-1.5px]',
           )}
           size={14}
         />
         : <IoMdCamera
           size={13}
-          className="text-icon translate-y-[-0.25px]"
+          className="text-icon translate-x-[-1px] translate-y-[-0.5px]"
         />}
       type={showAppleIcon && isCameraApple ? 'icon-first' : type}
       badged={badged}

src/components/EntityLink.tsx

@@ -27,7 +27,7 @@ export default function EntityLink({
   title?: string
   hoverEntity?: ReactNode
 } & EntityLinkExternalProps) {
-  const renderContent = () => <>
+  const renderLabel = () => <>
     <span className="xs:hidden">
       {labelSmall ?? label}
     </span>
@@ -42,7 +42,7 @@ export default function EntityLink({
         href={href}
         title={title}
         className={cc(
-          'inline-flex gap-1',
+          'inline-flex gap-[0.2rem]',
           !badged && 'text-main hover:text-gray-900 dark:hover:text-gray-100',
           dim && 'text-dim',
         )}
@@ -51,16 +51,16 @@ export default function EntityLink({
           {badged
             ? <span className="h-6 inline-flex items-center">
               <Badge type="secondary" uppercase interactive>
-                {renderContent()}
+                {renderLabel()}
               </Badge>
             </span>
             : <span className="uppercase">
-              {renderContent()}
+              {renderLabel()}
             </span>}
         </>}
         {icon && type !== 'text-only' &&
           <span className={cc(
-            'text-dim inline-flex min-w-[1rem]',
+            'text-dim inline-flex min-w-[0.8rem]',
             'translate-y-[4px]',
             type === 'icon-first' && 'order-first',
           )}>

src/photo/PhotoGrid.tsx

@@ -5,9 +5,7 @@ import AnimateItems from '@/components/AnimateItems';
 import { Camera } from '@/camera';
 import MorePhotos from '@/photo/MorePhotos';
 import { FilmSimulation } from '@/simulation';
-import { GRID_ASPECT_RATIO } from '@/site/config';
+import { GRID_ASPECT_RATIO, HIGH_DENSITY_GRID } from '@/site/config';
-
-const HIGH_DENSITY = GRID_ASPECT_RATIO <= 1;
 
 export default function PhotoGrid({
   photos,
@@ -43,7 +41,7 @@ export default function PhotoGrid({
           'grid gap-0.5 sm:gap-1',
           small
             ? 'grid-cols-3 xs:grid-cols-6'
-            : HIGH_DENSITY
+            : HIGH_DENSITY_GRID
               ? 'grid-cols-2 xs:grid-cols-4 lg:grid-cols-5'
               : 'grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
           'items-center',

src/photo/PhotoSetHeader.tsx

@@ -3,6 +3,7 @@ import { Photo, PhotoDateRange, dateRangeForPhotos } from '.';
 import ShareButton from '@/components/ShareButton';
 import AnimateItems from '@/components/AnimateItems';
 import { ReactNode } from 'react';
+import { HIGH_DENSITY_GRID } from '@/site/config';
 
 export default function PhotoSetHeader({
   entity,
@@ -37,14 +38,22 @@ export default function PhotoSetHeader({
       items={[<div
         key="PhotosHeader"
         className={cc(
-          'flex flex-col gap-y-0.5 items-start',
+          'grid gap-0.5 sm:gap-1',
-          'xs:grid grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
+          HIGH_DENSITY_GRID
+            ? 'xs:grid-cols-2 sm:grid-cols-4 lg:grid-cols-5'
+            : 'xs:grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
         )}>
-        {entity}
+        <span className={HIGH_DENSITY_GRID
+          ? 'sm:col-span-2'
+          : undefined}>
+          {entity}
+        </span>
         <span className={cc(
           'inline-flex gap-2 items-center self-start',
           'uppercase text-dim',
-          'sm:col-span-2 md:col-span-1 lg:col-span-2',
+          HIGH_DENSITY_GRID
+            ? 'lg:col-span-2'
+            : 'sm:col-span-2 md:col-span-1 lg:col-span-2',
         )}>
           {selectedPhotoIndex !== undefined
             // eslint-disable-next-line max-len

src/site/config.ts

@@ -59,6 +59,8 @@ export const GRID_ASPECT_RATIO = process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
 export const OG_TEXT_BOTTOM_ALIGNMENT =
   (process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM';
 
+export const HIGH_DENSITY_GRID = GRID_ASPECT_RATIO <= 1;
+
 export const CONFIG_CHECKLIST_STATUS = {
   hasPostgres: (process.env.POSTGRES_HOST ?? '').length > 0,
   hasBlob: HAS_VERCEL_BLOB || HAS_AWS_S3_STORAGE,

src/tag/PhotoTag.tsx

@@ -22,7 +22,7 @@ export default function PhotoTag({
         size={11}
         className={cc(
           'flex-shrink-0',
-          'text-icon translate-y-[0.5px]',
+          'text-icon translate-y-[1px]',
         )}
       />}
       type={type}