From 304e6ba85880450d2ba37e2422f1813ed235ba36 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 29 Apr 2025 23:21:36 -0500
Subject: [PATCH] Optimize scrolling share url

---
 src/components/MaskedScroll.tsx   |  8 +++++++-
 src/components/useMaskedScroll.ts | 12 ++++++++----
 src/share/ShareModal.tsx          |  3 ++-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/MaskedScroll.tsx b/src/components/MaskedScroll.tsx
index d6ef58d4..c33762ab 100644
--- a/src/components/MaskedScroll.tsx
+++ b/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}
diff --git a/src/components/useMaskedScroll.ts b/src/components/useMaskedScroll.ts
index 3fccc287..51f52532 100644
--- a/src/components/useMaskedScroll.ts
+++ b/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'}, `;
diff --git a/src/share/ShareModal.tsx b/src/share/ShareModal.tsx
index 4a37c8ea..f71f220b 100644
--- a/src/share/ShareModal.tsx
+++ b/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">