Optimize scrolling share url

src/components/MaskedScroll.tsx

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

src/components/useMaskedScroll.ts

@@ -3,6 +3,7 @@ import { RefObject, useCallback, useEffect, useMemo, useState } from 'react';
 export interface MaskedScrollExternalProps {
   direction?: 'vertical' | 'horizontal'
   fadeSize?: number
+  scrollToEndOnMount?: boolean
 }
 
 export default function useMaskedScroll({
@@ -11,6 +12,7 @@ export default function useMaskedScroll({
   fadeSize = 24,
   // Disable when calling 'updateMask' explicitly
   updateMaskOnEvents = true,
+  scrollToEndOnMount,
 }: MaskedScrollExternalProps & {
   ref: RefObject<HTMLDivElement | null>
   updateMaskOnEvents?: boolean
@@ -49,11 +51,13 @@ export default function useMaskedScroll({
 
   useEffect(() => {
     const ref = containerRef?.current;
-    const rect = ref?.getClientRects()[0];
-    if (ref && rect) {
-      ref.scrollTo({ left: rect.right });
+    const contentRect = ref?.children[0].getBoundingClientRect();
+    if (scrollToEndOnMount && ref && contentRect) {
+      ref.scrollTo(isVertical
+        ? { top: contentRect.height }
+        : { left: contentRect.width });
     }
-  }, [containerRef]);
+  }, [containerRef, scrollToEndOnMount, isVertical]);
 
   const maskImage = useMemo(() => {
     let mask = `linear-gradient(to ${isVertical ? 'bottom' : 'right'}, `;

src/share/ShareModal.tsx

@@ -85,7 +85,8 @@ export default function ShareModal({
             <MaskedScroll
               className="flex grow"
               direction="horizontal"
-              fadeSize={100}
+              fadeSize={50}
+              scrollToEndOnMount
               hideScrollbar
             >
               <div className="whitespace-nowrap px-2">