From b6344f2e085155d568beb2bed0dc112e11613425 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sun, 1 Feb 2026 18:18:07 +0000
Subject: [PATCH] mobile scroll

---
 .../components/history-modal-mobile.tsx       | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/features/page-history/components/history-modal-mobile.tsx b/apps/client/src/features/page-history/components/history-modal-mobile.tsx
index 0c955937..16b6ef89 100644
--- a/apps/client/src/features/page-history/components/history-modal-mobile.tsx
+++ b/apps/client/src/features/page-history/components/history-modal-mobile.tsx
@@ -58,8 +58,15 @@ export default function HistoryModalMobile({ pageId, pageTitle }: Props) {
 
   const [currentChangeIndex, setCurrentChangeIndex] = useState(0);
   const scrollViewportRef = useRef<HTMLDivElement>(null);
+  const dropdownViewportRef = useRef<HTMLDivElement>(null);
 
-  const { data: pageHistoryData, isLoading } = usePageHistoryListQuery(pageId);
+  const {
+    data: pageHistoryData,
+    isLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = usePageHistoryListQuery(pageId);
   const { data: activeHistoryData } = usePageHistoryQuery(activeHistoryId);
 
   const historyItems = useMemo(
@@ -113,6 +120,18 @@ export default function HistoryModalMobile({ pageId, pageTitle }: Props) {
     }
   }, [diffCounts]);
 
+  const handleDropdownScroll = useCallback(() => {
+    const viewport = dropdownViewportRef.current;
+    if (!viewport || !hasNextPage || isFetchingNextPage) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = viewport;
+    const isNearBottom = scrollTop + clientHeight >= scrollHeight - 50;
+
+    if (isNearBottom) {
+      fetchNextPage();
+    }
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+
   const scrollToChangeIndex = (index: number) => {
     const viewport = scrollViewportRef.current;
     if (!viewport || index < 1) return;
@@ -212,6 +231,10 @@ export default function HistoryModalMobile({ pageId, pageTitle }: Props) {
               </Group>
             )}
             comboboxProps={{ withinPortal: false }}
+            scrollAreaProps={{
+              viewportRef: dropdownViewportRef,
+              onScrollPositionChange: handleDropdownScroll,
+            }}
             style={{ flex: 1 }}
           />
           {diffCounts && (