u

src/components/AppShell.jsx

@@ -185,6 +185,8 @@ class AppSubNav extends PureComponent {
           sx={{
             width: SUB_NAV_WIDTH,
             flexShrink: 0,
+            ml: 3,
+            mr: 2,
           }}
         />
       );
@@ -204,7 +206,10 @@ class AppSubNav extends PureComponent {
           position: 'sticky',
           top: 0,
           alignSelf: 'flex-start',
+          height: 'var(--df-vh, 100vh)',
           py: 4,
+          ml: 3,
+          mr: 2,
         }}
       >
         {subNav.map(({ segment, label, title, help, icon: Icon }) => {
@@ -296,26 +301,24 @@ export default function AppShell() {
   return (
     <Box sx={{ display: 'flex', minHeight: 'var(--df-vh, 100vh)', bgcolor: 'background.default' }}>
       <AppSidebar activeNav={activeNav} navigate={navigate} />
+      <AppSubNav
+        activeNav={activeNav}
+        activeSub={activeSub}
+        navigate={navigate}
+      />
       <Box
         component="main"
         sx={(theme) => ({
           flexGrow: 1,
           display: 'flex',
-          gap: 2,
+          flexDirection: 'column',
           py: 4,
-          px: 3,
+          pr: 3,
           bgcolor: theme.nav.mainBackground,
           minWidth: 0,
         })}
       >
-        <AppSubNav
+        <Outlet />
-          activeNav={activeNav}
-          activeSub={activeSub}
-          navigate={navigate}
-        />
-        <Box sx={{ flexGrow: 1, minWidth: 0 }}>
-          <Outlet />
-        </Box>
       </Box>
       <ChatFab />
       <ChatDrawer />