Optimize tag page layout

src/app/(static)/t/[tag]/page.tsx

@@ -8,6 +8,7 @@ import {
   pageTitleForTag,
 } from '@/tag';
 import PhotoTag from '@/tag/PhotoTag';
+import { cc } from '@/utility/css';
 import { Metadata } from 'next';
 
 interface TagProps {
@@ -35,14 +36,32 @@ export async function generateMetadata({
 export default async function TagPage({ params: { tag } }: TagProps) {
   const photos = await getPhotos(undefined, undefined, undefined, tag);
 
+  const dateStart = photos[0].takenAtNaiveFormattedShort;
+  const dateEnd = photos[photos.length - 1].takenAtNaiveFormattedShort;
+
   return (
     <SiteGrid
       contentMain={<div className="space-y-8 mt-4">
-        <div className="flex items-center gap-2">
+        <div className={cc(
+          'flex gap-2 sm:gap-0',
+          'sm:grid sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
+        )}>
           <PhotoTag tag={tag} />
-          <span className="uppercase text-gray-400 dark:text-gray-500">
+          <span className={cc(
+            'uppercase text-gray-300 dark:text-gray-500',
+            'col-span-2 md:col-span-1 lg:col-span-2',
+          )}>
             {descriptionForTaggedPhotos(photos)}
           </span>
+          <span className={cc(
+            'hidden sm:inline-block',
+            'text-right uppercase',
+            'text-gray-400 dark:text-gray-500',
+          )}>
+            {dateStart === dateEnd
+              ? dateStart
+              : <>{dateStart}<br />– {dateEnd}</>}
+          </span>
         </div>
         <PhotoGrid photos={photos} />
       </div>}

src/photo/index.ts

@@ -64,6 +64,7 @@ export interface Photo extends PhotoDb {
   exposureTimeFormatted?: string
   exposureCompensationFormatted?: string
   takenAtNaiveFormatted?: string
+  takenAtNaiveFormattedShort?: string
 }
 
 export const parsePhotoFromDb = (photoDbRaw: PhotoDb): Photo => {
@@ -89,6 +90,8 @@ export const parsePhotoFromDb = (photoDbRaw: PhotoDb): Photo => {
       formatExposureCompensation(photoDb.exposureCompensation),
     takenAtNaiveFormatted:
       formatDateFromPostgresString(photoDb.takenAtNaive),
+    takenAtNaiveFormattedShort:
+      formatDateFromPostgresString(photoDb.takenAtNaive, true),
   };
 };
 

src/services/postgres.ts

@@ -166,7 +166,7 @@ const sqlGetPhotosFromDbByTag = (
 ) =>
   sql<PhotoDb>`
     SELECT * FROM photos WHERE ${tag}=ANY(tags)
-    ORDER BY taken_at DESC
+    ORDER BY taken_at ASC
     LIMIT ${limit} OFFSET ${offset}
   `
     .then(({ rows }) => rows.map(parsePhotoFromDb));

src/tag/PhotoTag.tsx

@@ -11,12 +11,15 @@ export default function PhotoTag({
     <Link
       key={tag}
       href={pathForTag(tag)}
-      className="flex items-center gap-x-2"
+      className="flex items-center gap-x-1.5 self-start"
     >
+      <FaTag
+        size={11}
+        className="text-gray-700 dark:text-gray-300 translate-y-[0.5px]"
+      />
       <span className="uppercase">
         {tag.replaceAll('-', ' ')}
       </span>
-      <FaTag size={11} />
     </Link>
   );
 }

src/utility/date.ts

@@ -1,13 +1,14 @@
 import { format, parseISO, parse } from 'date-fns';
 
+const DATE_STRING_FORMAT_SHORT    = 'dd MMM yyyy';
 const DATE_STRING_FORMAT          = 'd MMM yyyy h:mma';
 const DATE_STRING_FORMAT_POSTGRES = 'yyyy-MM-dd HH:mm:ss';
 
-export const formatDate = (date: Date) =>
+export const formatDate = (date: Date, short?: boolean) =>
-  format(date, DATE_STRING_FORMAT);
+  format(date, short? DATE_STRING_FORMAT_SHORT : DATE_STRING_FORMAT);
 
-export const formatDateFromPostgresString = (date: string) =>
+export const formatDateFromPostgresString = (date: string, short?: boolean) =>
-  formatDate(parse(date, DATE_STRING_FORMAT_POSTGRES, new Date()));
+  formatDate(parse(date, DATE_STRING_FORMAT_POSTGRES, new Date()), short);
 
 export const formatDateForPostgres = (date: Date) =>
   date.toISOString().replace(