fix: scroll in sidenav (#24521)

* fix: scroll in sidenav

* fix: update snapshot

packages/core/admin/admin/src/components/SubNav.tsx

@@ -7,6 +7,7 @@ import {
   Typography,
   IconButton,
   Badge,
+  ScrollArea,
 } from '@strapi/design-system';
 import { ChevronDown, Plus } from '@strapi/icons';
 import { NavLink } from 'react-router-dom';
@@ -349,8 +350,13 @@ const PageWrapper = styled(Box)`
   }
 `;
 
+const Content = ({ children }: { children: React.ReactNode }) => {
+  return <ScrollArea>{children}</ScrollArea>;
+};
+
 export const SubNav = {
   Main,
+  Content,
   Header,
   Link,
   Sections,

packages/core/admin/admin/src/pages/Settings/components/SettingsNav.tsx

@@ -1,4 +1,4 @@
-import { Badge, Divider, ScrollArea } from '@strapi/design-system';
+import { Badge, Divider } from '@strapi/design-system';
 import { Lightning } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
@@ -78,7 +78,7 @@ const SettingsNav = ({ isFullPage = false }: { isFullPage?: boolean }) => {
           <Divider />
         </>
       )}
-      <ScrollArea>
+      <SubNav.Content>
         {isFullPage && <SubNav.Header label={label} />}
         <SubNav.Sections>
           {sections.map((section) => (
@@ -124,7 +124,7 @@ const SettingsNav = ({ isFullPage = false }: { isFullPage?: boolean }) => {
             </SubNav.Section>
           ))}
         </SubNav.Sections>
-      </ScrollArea>
+      </SubNav.Content>
     </SubNav.Main>
   );
 };

packages/core/content-manager/admin/src/components/LeftMenu.tsx

@@ -1,15 +1,7 @@
 import * as React from 'react';
 
 import { useQueryParams, SubNav } from '@strapi/admin/strapi-admin';
-import {
+import { Flex, Searchbar, useCollator, useFilter, Divider, Loader } from '@strapi/design-system';
-  Flex,
-  Searchbar,
-  useCollator,
-  useFilter,
-  Divider,
-  ScrollArea,
-  Loader,
-} from '@strapi/design-system';
 import { parse, stringify } from 'qs';
 import { useIntl } from 'react-intl';
 
@@ -143,7 +135,7 @@ const LeftMenu = ({ isFullPage = false }: { isFullPage?: boolean }) => {
           <Divider />
         </>
       )}
-      <ScrollArea>
+      <SubNav.Content>
         {isFullPage && <SubNav.Header label={label} />}
         <Flex
           paddingLeft={{
@@ -209,7 +201,7 @@ const LeftMenu = ({ isFullPage = false }: { isFullPage?: boolean }) => {
             );
           })}
         </SubNav.Sections>
-      </ScrollArea>
+      </SubNav.Content>
     </SubNav.Main>
   );
 };

packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/ContentTypeBuilderNav.tsx

@@ -99,6 +99,7 @@ export const ContentTypeBuilderNav = () => {
     <SubNav.Main aria-label={pluginName}>
       <SubNav.Header label={pluginName} />
       <Divider background="neutral150" />
+      <SubNav.Content>
         <Flex padding={5} gap={3} direction={'column'} alignItems={'stretch'}>
           <tours.contentTypeBuilder.Save>
             <Flex gap={2}>
@@ -260,6 +261,7 @@ export const ContentTypeBuilderNav = () => {
             </Fragment>
           ))}
         </SubNav.Sections>
+      </SubNav.Content>
       <Dialog.Root
         open={discardConfirmationModalIsOpen}
         onOpenChange={setDiscardConfirmationModalIsOpen}