From a3788dc777d2b415b34dbc07adbad0528f18afed Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Thu, 26 Dec 2024 20:33:22 +0530
Subject: [PATCH] Scroll vertical-horizontal visibility seperation (#9221)

fixes #9208
---
 .../scroll/components/ScrollWrapper.tsx       | 68 +++++++++++++++++--
 1 file changed, 61 insertions(+), 7 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
index 597ea6fcd..86c95ce92 100644
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
@@ -75,22 +75,76 @@ export const ScrollWrapper = ({
 
   const [initialize, instance] = useOverlayScrollbars({
     options: {
-      scrollbars: { autoHide: 'scroll' },
+      scrollbars: {
+        autoHide: 'scroll',
+        autoHideDelay: 500,
+      },
       overflow: {
-        x: defaultEnableXScroll ? undefined : 'hidden',
-        y: defaultEnableYScroll ? undefined : 'hidden',
+        x: defaultEnableXScroll ? 'scroll' : 'hidden',
+        y: defaultEnableYScroll ? 'scroll' : 'hidden',
       },
     },
     events: {
-      scroll: handleScroll,
+      scroll: (osInstance) => {
+        const {
+          scrollOffsetElement: target,
+          scrollbarHorizontal,
+          scrollbarVertical,
+        } = osInstance.elements();
+
+        // Hide scrollbars by default
+        [scrollbarHorizontal, scrollbarVertical].forEach((scrollbar) => {
+          if (scrollbar !== null) {
+            scrollbar.track.style.visibility = 'hidden';
+          }
+        });
+
+        // Show appropriate scrollbar based on scroll direction
+        const isHorizontalScroll =
+          target.scrollLeft !== Number(target.dataset.lastScrollLeft || '0');
+        const isVerticalScroll =
+          target.scrollTop !== Number(target.dataset.lastScrollTop || '0');
+
+        // Show scrollbar based on scroll direction only with explicit conditions
+        if (
+          isHorizontalScroll === true &&
+          scrollbarHorizontal !== null &&
+          target.scrollWidth > target.clientWidth
+        ) {
+          scrollbarHorizontal.track.style.visibility = 'visible';
+        }
+        if (
+          isVerticalScroll === true &&
+          scrollbarVertical !== null &&
+          target.scrollHeight > target.clientHeight
+        ) {
+          scrollbarVertical.track.style.visibility = 'visible';
+        }
+
+        // Update scroll positions
+        target.dataset.lastScrollLeft = target.scrollLeft.toString();
+        target.dataset.lastScrollTop = target.scrollTop.toString();
+
+        handleScroll(osInstance);
+      },
     },
   });
 
   useEffect(() => {
-    if (scrollableRef?.current !== null) {
-      initialize(scrollableRef.current);
+    const currentRef = scrollableRef.current;
+
+    if (currentRef !== null) {
+      initialize(currentRef);
     }
-  }, [initialize, scrollableRef]);
+
+    return () => {
+      // Reset all component-specific Recoil state
+      setScrollTop(0);
+      setScrollLeft(0);
+      setOverlayScrollbars(null);
+      instance()?.destroy();
+    };
+  }, [initialize, instance, setScrollTop, setScrollLeft, setOverlayScrollbars]);
 
   useEffect(() => {
     setOverlayScrollbars(instance());