From 07de458fda366464b226e0ee214254b599ae8a16 Mon Sep 17 00:00:00 2001
From: Suhotra Dey <50608734+Lucifer4255@users.noreply.github.com>
Date: Wed, 11 Dec 2024 22:44:46 +0530
Subject: [PATCH] fix:Hide Scrollbar before Scroll (#8896)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix for the issue #8847 Hide Scrollbar before Scroll.


https://github.com/user-attachments/assets/27dda89f-e3f6-4c72-bcc5-8c7e10d3c823

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: ehconitin <nitinkoche03@gmail.com>
---
 .../scroll/components/ScrollWrapper.tsx          | 16 +++++++++-------
 1 file changed, 9 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 d39ef62d1..c5140f583 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
@@ -13,13 +13,14 @@ import { overlayScrollbarsState } from '@/ui/utilities/scroll/states/overlayScro
 
 import 'overlayscrollbars/overlayscrollbars.css';
 
-const StyledScrollWrapper = styled.div`
+const StyledScrollWrapper = styled.div<{ scrollHide?: boolean }>`
   display: flex;
   height: 100%;
   width: 100%;
 
   .os-scrollbar-handle {
-    background-color: ${({ theme }) => theme.border.color.medium};
+    background-color: ${({ theme, scrollHide }) =>
+      scrollHide ? 'transparent' : theme.border.color.medium};
   }
 `;
 
@@ -61,10 +62,7 @@ export const ScrollWrapper = ({
 
   const [initialize, instance] = useOverlayScrollbars({
     options: {
-      scrollbars: {
-        autoHide: scrollHide ? 'scroll' : 'never',
-        visibility: scrollHide ? 'hidden' : 'visible',
-      },
+      scrollbars: { autoHide: 'scroll' },
       overflow: {
         x: enableXScroll ? undefined : 'hidden',
         y: enableYScroll ? undefined : 'hidden',
@@ -92,7 +90,11 @@ export const ScrollWrapper = ({
         id: contextProviderName,
       }}
     >
-      <StyledScrollWrapper ref={scrollableRef} className={className}>
+      <StyledScrollWrapper
+        ref={scrollableRef}
+        className={className}
+        scrollHide={scrollHide}
+      >
         <StyledInnerContainer>{children}</StyledInnerContainer>
       </StyledScrollWrapper>
     </Context.Provider>