From 21081edfa3e290c1aa94fe6aae81b17645d5a251 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 16 Nov 2025 15:22:00 -0800
Subject: [PATCH] hide sticky table group after scrolling past

---
 .../hooks/use-sticky-table-group-rows.tsx        | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/item-list/item-table-list/hooks/use-sticky-table-group-rows.tsx b/src/renderer/components/item-list/item-table-list/hooks/use-sticky-table-group-rows.tsx
index c11209c0e..9c36a4e43 100644
--- a/src/renderer/components/item-list/item-table-list/hooks/use-sticky-table-group-rows.tsx
+++ b/src/renderer/components/item-list/item-table-list/hooks/use-sticky-table-group-rows.tsx
@@ -1,3 +1,4 @@
+import { useInView } from 'motion/react';
 import { useEffect, useMemo, useState } from 'react';
 
 import { useWindowSettings } from '/@/renderer/store/settings.store';
@@ -32,6 +33,15 @@ export const useStickyTableGroupRows = ({
     const { windowBarStyle } = useWindowSettings();
     const [stickyGroupIndex, setStickyGroupIndex] = useState<null | number>(null);
 
+    const topMargin =
+        windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS
+            ? '-130px'
+            : '-100px';
+
+    const isTableInView = useInView(containerRef, {
+        margin: `${topMargin} 0px 0px 0px`,
+    });
+
     const stickyTop = useMemo(() => {
         // If sticky header is showing, position group row below it with 1px offset to avoid conflict
         // Otherwise, use the base sticky position
@@ -169,8 +179,12 @@ export const useStickyTableGroupRows = ({
         stickyTop,
     ]);
 
+    const shouldShowStickyGroupRow = useMemo(() => {
+        return enabled && stickyGroupIndex !== null && isTableInView;
+    }, [enabled, stickyGroupIndex, isTableInView]);
+
     return {
-        shouldShowStickyGroupRow: stickyGroupIndex !== null,
+        shouldShowStickyGroupRow,
         stickyGroupIndex,
         stickyTop,
     };