Simplify masked scroll approach

src/components/useMaskedScroll.ts

@@ -1,4 +1,7 @@
-import { RefObject, useCallback, useEffect, useMemo, useState } from 'react';
+import { RefObject, useCallback, useEffect, useMemo } from 'react';
+ 
+const CSS_VAR_START = '--mask-start';
+const CSS_VAR_END   = '--mask-end';
 
 export interface MaskedScrollExternalProps {
   direction?: 'vertical' | 'horizontal'
@@ -17,8 +20,6 @@ export default function useMaskedScroll({
   ref: RefObject<HTMLDivElement | null>
   updateMaskOnEvents?: boolean
 }) {
-  const [position, setPosition] = useState({ start: true, end: true });
-
   const isVertical = direction === 'vertical';
 
   const updateMask = useCallback(() => {
@@ -30,9 +31,10 @@ export default function useMaskedScroll({
       const end = isVertical
         ? Math.abs((ref.scrollHeight - ref.scrollTop) - ref.clientHeight) < 1
         : Math.abs((ref.scrollWidth - ref.scrollLeft) - ref.clientWidth) < 1;
-      setPosition({ start, end });
+      ref.style.setProperty(CSS_VAR_START, `${!start ? fadeSize : 0}px`);
+      ref.style.setProperty(CSS_VAR_END, `${!end ? fadeSize : 0}px`);
     }
-  }, [containerRef, isVertical]);
+  }, [containerRef, fadeSize, isVertical]);
 
   useEffect(() => {
     const ref = containerRef?.current;
@@ -62,10 +64,10 @@ export default function useMaskedScroll({
   const maskImage = useMemo(() => {
     let mask = `linear-gradient(to ${isVertical ? 'bottom' : 'right'}, `;
     mask += 'transparent, black ';
-    mask += `${!position.start ? fadeSize : 0}px, black calc(100% - `;
-    mask += `${!position.end ? fadeSize : 0}px), transparent)`;
+    mask += `var(${CSS_VAR_START}), black calc(100% - `;
+    mask += `var(${CSS_VAR_END})), transparent)`;
     return mask;
-  }, [fadeSize, isVertical, position]);
+  }, [isVertical]);
 
   return { maskImage, updateMask };
 }

src/share/ShareModal.tsx

@@ -89,7 +89,7 @@ export default function ShareModal({
               scrollToEndOnMount
               hideScrollbar
             >
-              <div className="whitespace-nowrap px-2">
+              <div className="whitespace-nowrap px-2 sm:px-3">
                 {shortenUrl(pathShare)}
               </div>
             </MaskedScroll>