From 87591a5c89c5852520a922ad4e2222fe074d7a6b Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 19 Jan 2025 22:48:32 -0600
Subject: [PATCH] Add inner scroll for large sidebars on /grid

---
 src/photo/PhotoGridPage.tsx    | 22 ++++++++++++++--------
 src/photo/PhotoGridSidebar.tsx |  4 ++--
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/photo/PhotoGridPage.tsx b/src/photo/PhotoGridPage.tsx
index 22640fcc..a69eba06 100644
--- a/src/photo/PhotoGridPage.tsx
+++ b/src/photo/PhotoGridPage.tsx
@@ -9,6 +9,7 @@ import PhotoGridSidebar from './PhotoGridSidebar';
 import PhotoGridContainer from './PhotoGridContainer';
 import { useEffect } from 'react';
 import { useAppState } from '@/state/AppState';
+import clsx from 'clsx/lite';
 
 export default function PhotoGridPage({
   photos,
@@ -35,14 +36,19 @@ export default function PhotoGridPage({
       cacheKey={`page-${PATH_GRID}`}
       photos={photos}
       count={photosCount}
-      sidebar={<div className="sticky top-4 space-y-4 mt-[-4px]">
-        <PhotoGridSidebar {...{
-          tags,
-          cameras,
-          simulations,
-          photosCount,
-        }} />
-      </div>}
+      sidebar={
+        <div className={clsx(
+          'sticky top-0 -mt-5',
+          'max-h-screen overflow-y-auto py-4',
+          '[scrollbar-width:none]',
+        )}>
+          <PhotoGridSidebar {...{
+            tags,
+            cameras,
+            simulations,
+            photosCount,
+          }} />
+        </div>}
       canSelect
     />
   );
diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx
index af3a803d..ba93d5ff 100644
--- a/src/photo/PhotoGridSidebar.tsx
+++ b/src/photo/PhotoGridSidebar.tsx
@@ -44,7 +44,7 @@ export default function PhotoGridSidebar({
   , [tags, hiddenPhotosCount]);
 
   return (
-    <>
+    <div className="space-y-4">
       {SITE_ABOUT && <HeaderList
         items={[<p
           key="about"
@@ -143,6 +143,6 @@ export default function PhotoGridSidebar({
         : <HeaderList
           items={[photoQuantityText(photosCount, false)]}
         />}
-    </>
+    </div>
   );
 }