Add scrolling to share urls

src/components/MaskedScroll.tsx

@@ -4,7 +4,7 @@ import useMaskedScroll, { MaskedScrollExternalProps } from './useMaskedScroll';
 
 export default function MaskedScroll({
   direction = 'vertical',
-  fadeHeight,
+  fadeSize,
   hideScrollbar,
   className,
   style,
@@ -16,7 +16,7 @@ MaskedScrollExternalProps & {
 }) {
   const ref = useRef<HTMLDivElement>(null);
 
-  const { maskImage } = useMaskedScroll({ ref, direction, fadeHeight });
+  const { maskImage } = useMaskedScroll({ ref, direction, fadeSize });
 
   return <div
     {...props}

src/components/useMaskedScroll.ts

@@ -2,13 +2,13 @@ import { RefObject, useCallback, useEffect, useMemo, useState } from 'react';
 
 export interface MaskedScrollExternalProps {
   direction?: 'vertical' | 'horizontal'
-  fadeHeight?: number
+  fadeSize?: number
 }
 
 export default function useMaskedScroll({
   ref: containerRef,
   direction = 'vertical',
-  fadeHeight = 24,
+  fadeSize = 24,
   // Disable when calling 'updateMask' explicitly
   updateMaskOnEvents = true,
 }: MaskedScrollExternalProps & {
@@ -26,8 +26,8 @@ export default function useMaskedScroll({
         ? ref.scrollTop === 0
         : ref.scrollLeft === 0;
       const end = isVertical
-        ? ref.scrollHeight - ref.scrollTop === ref.clientHeight
-        : ref.scrollWidth - ref.scrollLeft === ref.clientWidth;
+        ? Math.abs((ref.scrollHeight - ref.scrollTop) - ref.clientHeight) < 1
+        : Math.abs((ref.scrollWidth - ref.scrollLeft) - ref.clientWidth) < 1;
       setPosition({ start, end });
     }
   }, [containerRef, isVertical]);
@@ -47,13 +47,21 @@ export default function useMaskedScroll({
     }
   }, [containerRef, updateMask, updateMaskOnEvents]);
 
+  useEffect(() => {
+    const ref = containerRef?.current;
+    const rect = ref?.getClientRects()[0];
+    if (ref && rect) {
+      ref.scrollTo({ left: rect.right });
+    }
+  }, [containerRef]);
+
   const maskImage = useMemo(() => {
     let mask = `linear-gradient(to ${isVertical ? 'bottom' : 'right'}, `;
     mask += 'transparent, black ';
-    mask += `${!position.start ? fadeHeight : 0}px, black calc(100% - `;
-    mask += `${!position.end ? fadeHeight : 0}px), transparent)`;
+    mask += `${!position.start ? fadeSize : 0}px, black calc(100% - `;
+    mask += `${!position.end ? fadeSize : 0}px), transparent)`;
     return mask;
-  }, [fadeHeight, isVertical, position]);
+  }, [fadeSize, isVertical, position]);
 
   return { maskImage, updateMask };
 }

src/photo/PhotoGridPageClient.tsx

@@ -40,7 +40,7 @@ export default function PhotoGridPageClient({
             'sticky top-0 -mb-5 -mt-5',
             'max-h-screen py-4',
           )}
-          fadeHeight={36}
+          fadeSize={36}
           hideScrollbar
         >
           <PhotoGridSidebar {...{

src/photo/PhotoLarge.tsx

@@ -289,7 +289,7 @@ export default function PhotoLarge({
         <div className="md:absolute inset-0 -mt-1">
           <MaskedScroll
             className="sticky top-4 self-start"
-            fadeHeight={36}
+            fadeSize={36}
             hideScrollbar
           >
             <DivDebugBaselineGrid className={clsx(

src/share/ShareModal.tsx

@@ -13,6 +13,7 @@ import { generateXPostText } from '@/utility/social';
 import { useAppState } from '@/state/AppState';
 import useOnPathChange from '@/utility/useOnPathChange';
 import { IoArrowUp } from 'react-icons/io5';
+import MaskedScroll from '@/components/MaskedScroll';
 
 export default function ShareModal({
   title,
@@ -81,9 +82,16 @@ export default function ShareModal({
             'flex items-center justify-stretch',
             'border border-gray-200 dark:border-gray-800',
           )}>
-            <div className="truncate p-2 w-full [direction:rtl] text-left">
-              {shortenUrl(pathShare)}
-            </div>
+            <MaskedScroll
+              className="flex grow"
+              direction="horizontal"
+              fadeSize={100}
+              hideScrollbar
+            >
+              <div className="whitespace-nowrap px-2">
+                {shortenUrl(pathShare)}
+              </div>
+            </MaskedScroll>
             {renderIcon(
               <BiCopy size={18} />,
               () => {

src/utility/cookie.ts

@@ -8,7 +8,6 @@ export const storeCookie = (
   sameSite = 'Lax',
 ) => {
   if (typeof document !== 'undefined') {
-    console.log('storeCookie', name, value);
     document.cookie =
       `${name}=${value};Path=${path};Max-Age=${maxAge};SameSite=${sameSite}`;
   }