From 86e4bf43a7c386d39b48a9ae6099949629a7d7c5 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 19 Mar 2025 23:23:56 -0500
Subject: [PATCH] Switch photo grid sidebar guards to masks

---
 src/photo/PhotoGridPage.tsx | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/photo/PhotoGridPage.tsx b/src/photo/PhotoGridPage.tsx
index 903bc94a..bf5c775f 100644
--- a/src/photo/PhotoGridPage.tsx
+++ b/src/photo/PhotoGridPage.tsx
@@ -24,17 +24,6 @@ export default function PhotoGridPage({
     [setSelectedPhotoIds],
   );
 
-  const renderGuard = (side: 'top' | 'bottom') =>
-    <div
-      className={clsx(
-        'absolute left-0 right-0',
-        side === 'top'
-          ? 'top-0 bg-linear-to-b from-white dark:from-black'
-          : 'bottom-0 bg-linear-to-t from-white dark:from-black',
-        'h-6 z-10 pointer-events-none',
-      )}
-    />;
-
   return (
     <PhotoGridContainer
       cacheKey={`page-${PATH_GRID_INFERRED}`}
@@ -46,8 +35,11 @@ export default function PhotoGridPage({
             'sticky top-0 -mb-5 -mt-5',
             'max-h-screen h-full',
           )}
+          style={{
+            // eslint-disable-next-line max-len
+            maskImage: 'linear-gradient(to bottom, transparent, black 24px, black calc(100% - 24px), transparent)',
+          }}
         >
-          {renderGuard('top')}
           <div className={clsx(
             'max-h-full overflow-y-auto [scrollbar-width:none]',
             'py-4',
@@ -58,7 +50,6 @@ export default function PhotoGridPage({
             }}
             />
           </div>
-          {renderGuard('bottom')}
         </div>
       }
       canSelect