fix: Added ScrollWrapper on Settings Sidebar (#11106)

## Description

- this PR fixes issue #11092 
- Added ScrollWrapper and scroll in Settings sidebar while maintaining
the exit Settings fixed.

## Added Behaviour



https://github.com/user-attachments/assets/c8db0f6d-986e-46f3-85d6-bb3028c56e5f

---------

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

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -11,11 +11,17 @@ import { NavigationDrawerItemGroup } from '@/ui/navigation/navigation-drawer/com
 import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
 import { getNavigationSubItemLeftAdornment } from '@/ui/navigation/navigation-drawer/utils/getNavigationSubItemLeftAdornment';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { matchPath, resolvePath, useLocation } from 'react-router-dom';
 import { IconDoorEnter } from 'twenty-ui';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
+const StyledInnerContainer = styled.div`
+  height: 100%;
+`;
+
 export const SettingsNavigationDrawerItems = () => {
   const { signOut } = useAuth();
   const { t } = useLingui();
@@ -41,7 +47,14 @@ export const SettingsNavigationDrawerItems = () => {
   };
 
   return (
-    <>
+    <ScrollWrapper
+      contextProviderName="navigationDrawer"
+      componentInstanceId={`scroll-wrapper-settings-navigation-drawer`}
+      scrollbarVariant="no-padding"
+      heightMode="fit-content"
+      defaultEnableXScroll={false}
+    >
+      <StyledInnerContainer>
         {settingsNavigationItems.map((section) => {
           const allItemsHidden = section.items.every((item) => item.isHidden);
           if (allItemsHidden) {
@@ -123,6 +136,7 @@ export const SettingsNavigationDrawerItems = () => {
             Icon={IconDoorEnter}
           />
         </NavigationDrawerSection>
-    </>
+      </StyledInnerContainer>
+    </ScrollWrapper>
   );
 };

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx

@@ -6,7 +6,6 @@ import { useRecoilValue } from 'recoil';
 import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
@@ -55,7 +54,7 @@ const StyledItemsContainer = styled.div<{ isSettings?: boolean }>`
   display: flex;
   flex-direction: column;
   margin-bottom: auto;
-  overflow: ${({ isSettings }) => (isSettings ? 'visible' : 'hidden')};
+  overflow: hidden;
   flex: 1;
 `;