diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
index c72852b4df..80754cac28 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
@@ -41,17 +41,19 @@ export const MobileNavigationSidebar: FC<{ onClick: () => void }> = ({
     );
 };
 
-export const StretchContainer = styled(Box)(({ theme }) => ({
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(2),
-    alignSelf: 'stretch',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-    zIndex: 1,
-    overflowAnchor: 'none',
-    maxWidth: theme.spacing(40),
-}));
+export const StretchContainer = styled(Box)<{ mode: string }>(
+    ({ theme, mode }) => ({
+        backgroundColor: theme.palette.background.paper,
+        padding: theme.spacing(2),
+        alignSelf: 'stretch',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(2),
+        zIndex: 1,
+        overflowAnchor: 'none',
+        width: mode === 'full' ? theme.spacing(40) : 'auto',
+    }),
+);
 
 // This component is needed when the sticky item could overlap with nav items. You can replicate it on a short screen.
 const StickyContainer = styled(Box)(({ theme }) => ({
@@ -83,7 +85,7 @@ export const NavigationSidebar = () => {
     }, [initialPathname]);
 
     return (
-        <StretchContainer>
+        <StretchContainer mode={mode}>
             <PrimaryNavigationList
                 mode={mode}
                 onClick={setActiveItem}