Fix overlay scroll gaps (#4512)

* fix overlay scroll leaving gap

* fixed tests

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/__mocks__/styleMock.js

@@ -0,0 +1 @@
+export default 'test-file-stub';

packages/twenty-front/jest.config.ts

@@ -13,6 +13,7 @@ export default {
     '@testing/(.+)': '<rootDir>/src/testing/$1',
     '\\.(jpg|jpeg|png|gif|webp|svg|svg\\?react)$':
       '<rootDir>/__mocks__/imageMock.js',
+    '\\.css$': '<rootDir>/__mocks__/styleMock.js',
   },
   extensionsToTreatAsEsm: ['.ts', '.tsx'],
   coverageThreshold: {

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailSection.tsx

@@ -5,6 +5,7 @@ import { Section } from '@/ui/layout/section/components/Section';
 const StyledRecordDetailSection = styled(Section)`
   border-top: 1px solid ${({ theme }) => theme.border.color.light};
   padding: ${({ theme }) => theme.spacing(3)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
   width: auto;
 `;
 

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -5,6 +5,7 @@ import { useRecoilValue } from 'recoil';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
 import { Tab } from './Tab';
 
@@ -30,7 +31,6 @@ const StyledContainer = styled.div`
   height: 40px;
   padding-left: ${({ theme }) => theme.spacing(2)};
   user-select: none;
-  overflow: auto;
 `;
 
 export const TabList = ({ tabs, tabListId }: TabListProps) => {
@@ -46,24 +46,26 @@ export const TabList = ({ tabs, tabListId }: TabListProps) => {
 
   return (
     <TabListScope tabListScopeId={tabListId}>
-      <StyledContainer>
-        {tabs
-          .filter((tab) => !tab.hide)
-          .map((tab) => (
-            <Tab
-              id={tab.id}
-              key={tab.id}
-              title={tab.title}
-              Icon={tab.Icon}
-              active={tab.id === activeTabId}
-              onClick={() => {
-                setActiveTabId(tab.id);
-              }}
-              disabled={tab.disabled}
-              hasBetaPill={tab.hasBetaPill}
-            />
-          ))}
-      </StyledContainer>
+      <ScrollWrapper hideY>
+        <StyledContainer>
+          {tabs
+            .filter((tab) => !tab.hide)
+            .map((tab) => (
+              <Tab
+                id={tab.id}
+                key={tab.id}
+                title={tab.title}
+                Icon={tab.Icon}
+                active={tab.id === activeTabId}
+                onClick={() => {
+                  setActiveTabId(tab.id);
+                }}
+                disabled={tab.disabled}
+                hasBetaPill={tab.hasBetaPill}
+              />
+            ))}
+        </StyledContainer>
+      </ScrollWrapper>
     </TabListScope>
   );
 };

packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx

@@ -1,7 +1,13 @@
-import { createContext, RefObject, useRef } from 'react';
+import { createContext, RefObject, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
+import { OverlayScrollbars } from 'overlayscrollbars';
+import { useOverlayScrollbars } from 'overlayscrollbars-react';
+import { useRecoilCallback } from 'recoil';
 
-import { useListenScroll } from '../hooks/useListenScroll';
+import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
+import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
+
+import 'overlayscrollbars/overlayscrollbars.css';
 
 export const ScrollWrapperContext = createContext<RefObject<HTMLDivElement>>({
   current: null,
@@ -10,11 +16,9 @@ export const ScrollWrapperContext = createContext<RefObject<HTMLDivElement>>({
 const StyledScrollWrapper = styled.div`
   display: flex;
   height: 100%;
-  overflow: auto;
-  scrollbar-gutter: stable;
   width: 100%;
 
-  &.scrolling::-webkit-scrollbar-thumb {
+  .os-scrollbar-handle {
     background-color: ${({ theme }) => theme.border.color.medium};
   }
 `;
@@ -22,15 +26,47 @@ const StyledScrollWrapper = styled.div`
 export type ScrollWrapperProps = {
   children: React.ReactNode;
   className?: string;
+  hideY?: boolean;
+  hideX?: boolean;
 };
 
-export const ScrollWrapper = ({ children, className }: ScrollWrapperProps) => {
+export const ScrollWrapper = ({
+  children,
+  className,
+  hideX,
+  hideY,
+}: ScrollWrapperProps) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
 
-  useListenScroll({
-    scrollableRef,
+  const handleScroll = useRecoilCallback(
+    ({ set }) =>
+      (overlayScroll: OverlayScrollbars) => {
+        const target = overlayScroll.elements().scrollOffsetElement;
+        set(scrollTopState(), target.scrollTop);
+        set(scrollLeftState(), target.scrollLeft);
+      },
+    [],
+  );
+
+  const [initialize] = useOverlayScrollbars({
+    options: {
+      scrollbars: { autoHide: 'scroll' },
+      overflow: {
+        y: hideY ? 'hidden' : undefined,
+        x: hideX ? 'hidden' : undefined,
+      },
+    },
+    events: {
+      scroll: handleScroll,
+    },
   });
 
+  useEffect(() => {
+    if (scrollableRef?.current !== null) {
+      initialize(scrollableRef.current);
+    }
+  }, [initialize, scrollableRef]);
+
   return (
     <ScrollWrapperContext.Provider value={scrollableRef}>
       <StyledScrollWrapper ref={scrollableRef} className={className}>

packages/twenty-front/src/modules/ui/utilities/scroll/hooks/__tests__/useListenScroll.test.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { expect } from '@storybook/test';
-import { act, fireEvent, renderHook } from '@testing-library/react';
-import { RecoilRoot, useRecoilValue } from 'recoil';
-
-import { useListenScroll } from '@/ui/utilities/scroll/hooks/useListenScroll';
-import { isScrollingState } from '@/ui/utilities/scroll/states/isScrollingState';
-import { isDefined } from '~/utils/isDefined';
-
-const containerRef = React.createRef<HTMLDivElement>();
-
-const Wrapper = ({ children }: { children: React.ReactNode }) => (
-  <RecoilRoot>
-    <div id="container" ref={containerRef}>
-      {children}
-    </div>
-  </RecoilRoot>
-);
-
-jest.useFakeTimers();
-
-describe('useListenScroll', () => {
-  it('should trigger the callback when scrolling', () => {
-    const { result } = renderHook(
-      () => {
-        useListenScroll({ scrollableRef: containerRef });
-        const isScrolling = useRecoilValue(isScrollingState);
-
-        return { isScrolling };
-      },
-      {
-        wrapper: Wrapper,
-      },
-    );
-
-    expect(result.current.isScrolling).toBe(false);
-
-    jest.advanceTimersByTime(500);
-
-    const container = document.querySelector('#container');
-
-    act(() => {
-      if (isDefined(container)) fireEvent.scroll(container);
-    });
-
-    expect(result.current.isScrolling).toBe(true);
-  });
-});

packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts

@@ -1,66 +0,0 @@
-import { useEffect } from 'react';
-import debounce from 'lodash.debounce';
-import { useRecoilCallback } from 'recoil';
-
-import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
-import { scrollTopState } from '@/ui/utilities/scroll/states/scrollTopState';
-
-import { isScrollingState } from '../states/isScrollingState';
-
-export const useListenScroll = <T extends Element>({
-  scrollableRef,
-}: {
-  scrollableRef: React.RefObject<T>;
-}) => {
-  const hideScrollBarsCallback = useRecoilCallback(
-    ({ snapshot }) =>
-      () => {
-        const isScrolling = snapshot.getLoadable(isScrollingState).getValue();
-
-        if (!isScrolling) {
-          scrollableRef.current?.classList.remove('scrolling');
-        }
-      },
-    [scrollableRef],
-  );
-
-  const handleScrollStart = useRecoilCallback(
-    ({ set }) =>
-      (event: Event) => {
-        set(isScrollingState, true);
-        scrollableRef.current?.classList.add('scrolling');
-
-        const target = event.target as HTMLElement;
-
-        set(scrollTopState, target.scrollTop);
-        set(scrollLeftState, target.scrollLeft);
-      },
-    [scrollableRef],
-  );
-
-  const handleScrollEnd = useRecoilCallback(
-    ({ set }) =>
-      () => {
-        set(isScrollingState, false);
-        debounce(hideScrollBarsCallback, 1000)();
-      },
-    [hideScrollBarsCallback],
-  );
-
-  useEffect(() => {
-    const refTarget = scrollableRef.current;
-
-    refTarget?.addEventListener('scrollend', handleScrollEnd);
-    refTarget?.addEventListener('scroll', handleScrollStart);
-
-    return () => {
-      refTarget?.removeEventListener('scrollend', handleScrollEnd);
-      refTarget?.removeEventListener('scroll', handleScrollStart);
-    };
-  }, [
-    hideScrollBarsCallback,
-    handleScrollStart,
-    handleScrollEnd,
-    scrollableRef,
-  ]);
-};

packages/twenty-front/src/modules/ui/utilities/scroll/states/isScrollingState.ts

@@ -1,6 +0,0 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
-
-export const isScrollingState = createState({
-  key: 'scroll/isScollingState',
-  defaultValue: false,
-});