Fix sidebar scroll behavior

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,

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 };
 }

src/photo/PhotoGridPageClient.tsx

@@ -41,6 +41,7 @@ export default function PhotoGridPageClient({
             'max-h-screen py-4',
           )}
           fadeSize={100}
+          setMaxSize={false}
         >
           <PhotoGridSidebar {...{
             ...categories,