Remove overlay-scroll-bar (#11258)

## What

- Deprecate overlayscrollbars as we decided to follow the native
behavior
- rework on performances (avoid calling recoil states too much at field
level which is quite expensive)
- Also implements:
https://github.com/twentyhq/core-team-issues/issues/569

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx

@@ -55,7 +55,6 @@ export const DropdownMenuItemsContainer = ({
     >
       {hasMaxHeight ? (
         <StyledScrollWrapper
-          contextProviderName="dropdownMenuItemsContainer"
           componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}
         >
           <StyledDropdownMenuItemsInternalContainer>
@@ -69,10 +68,7 @@ export const DropdownMenuItemsContainer = ({
       )}
     </StyledDropdownMenuItemsExternalContainer>
   ) : (
-    <ScrollWrapper
-      contextProviderName="dropdownMenuItemsContainer"
-      componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}
-    >
+    <ScrollWrapper componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}>
       <StyledDropdownMenuItemsExternalContainer
         hasMaxHeight={hasMaxHeight}
         className={className}

packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx

@@ -30,17 +30,7 @@ const StyledLayout = styled.div`
   scrollbar-width: 4px;
   width: 100%;
 
-  *::-webkit-scrollbar {
-    height: 4px;
-    width: 4px;
-  }
-
-  *::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-
   *::-webkit-scrollbar-thumb {
-    background-color: transparent;
     border-radius: ${({ theme }) => theme.border.radius.sm};
   }
 `;

packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx

@@ -32,7 +32,6 @@ export const ShowPageContainer = ({ children }: ShowPageContainerProps) => {
   return isMobile ? (
     <StyledOuterContainer>
       <StyledScrollWrapper
-        contextProviderName="showPageContainer"
         componentInstanceId={'scroll-wrapper-show-page-container'}
       >
         <StyledInnerContainer>{children}</StyledInnerContainer>

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageActivityContainer.tsx

@@ -70,7 +70,6 @@ export const ShowPageActivityContainer = ({
 
   return (
     <ScrollWrapper
-      contextProviderName="showPageActivityContainer"
       componentInstanceId={`scroll-wrapper-tab-list-${targetableObject.id}`}
     >
       <StyledShowPageActivityContainer>

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -47,7 +47,6 @@ export const ShowPageLeftContainer = ({
         </StyledInnerContainer>
       ) : (
         <ScrollWrapper
-          contextProviderName="showPageLeftContainer"
           componentInstanceId={`scroll-wrapper-show-page-left-container`}
         >
           <StyledIntermediateContainer>

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

@@ -79,7 +79,6 @@ export const TabList = ({
         />
         <ScrollWrapper
           defaultEnableYScroll={false}
-          contextProviderName="tabList"
           componentInstanceId={`scroll-wrapper-tab-list-${componentInstanceId}`}
         >
           <StyledContainer className={className}>