[docs] Fix Dashboard sidenav sroll (#44876)

mui · Jan 13, 2025 · dd69cf0 · dd69cf0
1 parent 61c6d1a
commit dd69cf0
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 12 deletions.
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CardAlert.js b/docs/data/material/getting-started/templates/dashboard/components/CardAlert.js
@@ -7,7 +7,7 @@ import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
 
 export default function CardAlert() {
   return (
-    <Card variant="outlined" sx={{ m: 1.5, p: 1.5 }}>
+    <Card variant="outlined" sx={{ m: 1.5, flexShrink: 0 }}>
       <CardContent>
         <AutoAwesomeRoundedIcon fontSize="small" />
         <Typography gutterBottom sx={{ fontWeight: 600 }}>

diff --git a/docs/data/material/getting-started/templates/dashboard/components/CardAlert.tsx b/docs/data/material/getting-started/templates/dashboard/components/CardAlert.tsx
@@ -7,7 +7,7 @@ import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
 
 export default function CardAlert() {
   return (
-    <Card variant="outlined" sx={{ m: 1.5, p: 1.5 }}>
+    <Card variant="outlined" sx={{ m: 1.5, flexShrink: 0 }}>
       <CardContent>
         <AutoAwesomeRoundedIcon fontSize="small" />
         <Typography gutterBottom sx={{ fontWeight: 600 }}>

diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.js b/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.js
@@ -5,7 +5,6 @@ import { columns, rows } from '../internals/data/gridData';
 export default function CustomizedDataGrid() {
   return (
     <DataGrid
-      autoHeight
       checkboxSelection
       rows={rows}
       columns={columns}

diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx b/docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx
@@ -5,7 +5,6 @@ import { columns, rows } from '../internals/data/gridData';
 export default function CustomizedDataGrid() {
   return (
     <DataGrid
-      autoHeight
       checkboxSelection
       rows={rows}
       columns={columns}

diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuContent.js b/docs/data/material/getting-started/templates/dashboard/components/MenuContent.js
@@ -39,7 +39,6 @@ export default function MenuContent() {
           </ListItem>
         ))}
       </List>
-
       <List dense>
         {secondaryListItems.map((item, index) => (
           <ListItem key={index} disablePadding sx={{ display: 'block' }}>

diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuContent.tsx b/docs/data/material/getting-started/templates/dashboard/components/MenuContent.tsx
@@ -39,7 +39,6 @@ export default function MenuContent() {
           </ListItem>
         ))}
       </List>
-
       <List dense>
         {secondaryListItems.map((item, index) => (
           <ListItem key={index} disablePadding sx={{ display: 'block' }}>

diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js
@@ -45,8 +45,17 @@ export default function SideMenu() {
         <SelectContent />
       </Box>
       <Divider />
-      <MenuContent />
-      <CardAlert />
+      <Box
+        sx={{
+          overflow: 'auto',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <MenuContent />
+        <CardAlert />
+      </Box>
       <Stack
         direction="row"
         sx={{

diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx
@@ -45,8 +45,17 @@ export default function SideMenu() {
         <SelectContent />
       </Box>
       <Divider />
-      <MenuContent />
-      <CardAlert />
+      <Box
+        sx={{
+          overflow: 'auto',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <MenuContent />
+        <CardAlert />
+      </Box>
       <Stack
         direction="row"
         sx={{

diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.js
@@ -8,7 +8,6 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
 import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
-
 import MenuButton from './MenuButton';
 import MenuContent from './MenuContent';
 import CardAlert from './CardAlert';

diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx b/docs/data/material/getting-started/templates/dashboard/components/SideMenuMobile.tsx
@@ -7,7 +7,6 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
 import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
-
 import MenuButton from './MenuButton';
 import MenuContent from './MenuContent';
 import CardAlert from './CardAlert';