From bec619e139d19d3b66b9df8e6f32fd8179e30a28 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 12 Sep 2023 22:09:16 -0500
Subject: [PATCH] Tighten layout gaps, add grid density

---
 src/app/(static)/page.tsx | 4 ++--
 src/photo/PhotoGrid.tsx   | 4 ++--
 src/photo/index.ts        | 4 +---
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/app/(static)/page.tsx b/src/app/(static)/page.tsx
index 82503125..22ccedd0 100644
--- a/src/app/(static)/page.tsx
+++ b/src/app/(static)/page.tsx
@@ -19,7 +19,7 @@ export default async function HomePage({
 }: {
   searchParams: { next: string };
 }) {
-  const { offset, limit } = getPhotosLimitForQuery(searchParams.next);
+  const { offset, limit } = getPhotosLimitForQuery(searchParams.next, 12);
 
   const photos = await getPhotos(undefined, limit);
 
@@ -31,7 +31,7 @@ export default async function HomePage({
     photos.length > 0
       ? <div className="space-y-4">
         <AnimateItems
-          className="space-y-2"
+          className="space-y-1"
           duration={0.7}
           staggerDelay={0.15}
           distanceOffset={0}
diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx
index 0a676817..97819340 100644
--- a/src/photo/PhotoGrid.tsx
+++ b/src/photo/PhotoGrid.tsx
@@ -29,8 +29,8 @@ export default function PhotoGrid({
     <>
       <AnimateItems
         className={cc(
-          'grid gap-1 sm:gap-2',
-          'grid-cols-2 sm:grid-cols-4 md:grid-cols-3',
+          'grid gap-1',
+          'grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
           'items-center',
         )}
         duration={fast ? 0.3 : undefined}
diff --git a/src/photo/index.ts b/src/photo/index.ts
index bc42d474..c550f054 100644
--- a/src/photo/index.ts
+++ b/src/photo/index.ts
@@ -14,8 +14,6 @@ import camelcaseKeys from 'camelcase-keys';
 import { Metadata } from 'next';
 import short from 'short-uuid';
 
-export const PHOTOS_PER_REQUEST = 12;
-
 const translator = short();
 
 // Core EXIF data
@@ -124,7 +122,7 @@ export const getNextPhoto = (photo: Photo, photos: Photo[]) => {
 
 export const getPhotosLimitForQuery = (
   query?: string,
-  photosPerRequest = PHOTOS_PER_REQUEST,
+  photosPerRequest = 24,
 ) => {
   const offsetInt = parseInt(query ?? '0');
   const offset = (Number.isNaN(offsetInt) ? 0 : offsetInt);