fix:Hide Scrollbar before Scroll (#8896)

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>

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: {
+      scrollbars: { autoHide: 'scroll' },
-        autoHide: scrollHide ? 'scroll' : 'never',
-        visibility: scrollHide ? 'hidden' : 'visible',
-      },
       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>