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 <[email protected]> Co-authored-by: ehconitin <[email protected]>
twentyhq · Dec 11, 2024 · 07de458 · 07de458
1 parent 4d9facb
commit 07de458
Showing 1 changed file with 9 additions and 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
@@ -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>