From b635ba28ccec05eab535ef6a33ce9590e58b6a64 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 6 May 2025 12:20:10 -0500
Subject: [PATCH] Fix sidebar scroll behavior

---
 src/components/MaskedScroll.tsx   |  2 ++
 src/components/useMaskedScroll.ts | 13 ++++++++++---
 src/photo/PhotoGridPageClient.tsx |  1 +
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/MaskedScroll.tsx b/src/components/MaskedScroll.tsx
index f384263e..45dba06a 100644
--- a/src/components/MaskedScroll.tsx
+++ b/src/components/MaskedScroll.tsx
@@ -5,6 +5,7 @@ export default function MaskedScroll({
   direction,
   fadeSize,
   animationDuration,
+  setMaxSize,
   hideScrollbar,
   updateMaskOnEvents,
   scrollToEndOnMount,
@@ -20,6 +21,7 @@ Omit<Parameters<typeof useMaskedScroll>[0], 'ref'>) {
     direction,
     fadeSize,
     animationDuration,
+    setMaxSize,
     hideScrollbar,
     updateMaskOnEvents,
     scrollToEndOnMount,
diff --git a/src/components/useMaskedScroll.ts b/src/components/useMaskedScroll.ts
index 87f02e2e..31a0d532 100644
--- a/src/components/useMaskedScroll.ts
+++ b/src/components/useMaskedScroll.ts
@@ -14,6 +14,7 @@ export default function useMaskedScroll({
   direction = 'vertical',
   fadeSize = 24,
   animationDuration = 0.3,
+  setMaxSize = true,
   hideScrollbar = true,
   // Disable when calling 'updateMask' explicitly
   updateMaskOnEvents = true,
@@ -24,6 +25,7 @@ export default function useMaskedScroll({
   direction?: 'vertical' | 'horizontal'
   fadeSize?: number
   animationDuration?: number
+  setMaxSize?: boolean
   hideScrollbar?: boolean
   scrollToEndOnMount?: boolean
 }) {
@@ -106,10 +108,15 @@ export default function useMaskedScroll({
       transition,
       ...hideScrollbar && { scrollbarWidth: 'none' },
       ...isVertical
-        ? { maxHeight: '100%', overflowY: 'scroll' }
-        : { maxWidth: '100%', overflowX: 'scroll' },
+        ? {
+          ...setMaxSize && { maxHeight: '100%' },
+          overflowY: 'scroll',
+        } : {
+          ...setMaxSize && { maxWidth: '100%' },
+          overflowX: 'scroll',
+        },
     };
-  }, [isVertical, fadeSize, animationDuration, hideScrollbar]);
+  }, [isVertical, fadeSize, animationDuration, hideScrollbar, setMaxSize]);
 
   return { styleMask, updateMask };
 }
diff --git a/src/photo/PhotoGridPageClient.tsx b/src/photo/PhotoGridPageClient.tsx
index 3bdc1bcd..4d467410 100644
--- a/src/photo/PhotoGridPageClient.tsx
+++ b/src/photo/PhotoGridPageClient.tsx
@@ -41,6 +41,7 @@ export default function PhotoGridPageClient({
             'max-h-screen py-4',
           )}
           fadeSize={100}
+          setMaxSize={false}
         >
           <PhotoGridSidebar {...{
             ...categories,