[tree view][docs] Adjust all demos height to account for the updated …

…design (#11979) Co-authored-by: alexandre <[email protected]> Co-authored-by: noraleonte <[email protected]>
mui · Feb 15, 2024 · d28d48a · d28d48a
1 parent 4613e48
commit d28d48a
Show file tree

Hide file tree

Showing 49 changed files with 49 additions and 49 deletions.
diff --git a/docs/data/tree-view/getting-started/FirstComponent.js b/docs/data/tree-view/getting-started/FirstComponent.js
@@ -6,7 +6,7 @@ export default function FirstComponent() {
   return (
     <SimpleTreeView
       aria-label="file system navigator"
-      sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+      sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
     >
       <TreeItem nodeId="1" label="Applications">
         <TreeItem nodeId="2" label="Calendar" />

diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx b/docs/data/tree-view/getting-started/FirstComponent.tsx
@@ -6,7 +6,7 @@ export default function FirstComponent() {
   return (
     <SimpleTreeView
       aria-label="file system navigator"
-      sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+      sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
     >
       <TreeItem nodeId="1" label="Applications">
         <TreeItem nodeId="2" label="Calendar" />

diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx.preview b/docs/data/tree-view/getting-started/FirstComponent.tsx.preview
@@ -1,6 +1,6 @@
 <SimpleTreeView
   aria-label="file system navigator"
-  sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+  sx={{ height: 200, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
 >
   <TreeItem nodeId="1" label="Applications">
     <TreeItem nodeId="2" label="Calendar" />

diff --git a/docs/data/tree-view/overview/BasicRichTreeView.js b/docs/data/tree-view/overview/BasicRichTreeView.js
@@ -25,7 +25,7 @@ const MUI_X_PRODUCTS = [
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );

diff --git a/docs/data/tree-view/overview/BasicRichTreeView.tsx b/docs/data/tree-view/overview/BasicRichTreeView.tsx
@@ -25,7 +25,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );

diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.js b/docs/data/tree-view/overview/BasicSimpleTreeView.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />

diff --git a/docs/data/tree-view/overview/BasicSimpleTreeView.tsx b/docs/data/tree-view/overview/BasicSimpleTreeView.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />

diff --git a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.js
@@ -67,7 +67,7 @@ export default function ControlledExpansion() {
           {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           expandedNodes={expandedNodes}

diff --git a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx
@@ -71,7 +71,7 @@ export default function ControlledExpansion() {
           {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           expandedNodes={expandedNodes}

diff --git a/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview b/docs/data/tree-view/rich-tree-view/expansion/ControlledExpansion.tsx.preview
@@ -3,7 +3,7 @@
     {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
   </Button>
 </Box>
-<Box sx={{ height: 264, flexGrow: 1 }}>
+<Box sx={{ minHeight: 200, flexGrow: 1 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     expandedNodes={expandedNodes}

diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.js
@@ -52,7 +52,7 @@ export default function TrackNodeExpansionToggle() {
         </Typography>
       )}
 
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onNodeExpansionToggle={handleNodeExpansionToggle}

diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx
@@ -58,7 +58,7 @@ export default function TrackNodeExpansionToggle() {
           Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
         </Typography>
       )}
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onNodeExpansionToggle={handleNodeExpansionToggle}

diff --git a/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview b/docs/data/tree-view/rich-tree-view/expansion/TrackNodeExpansionToggle.tsx.preview
@@ -5,7 +5,7 @@
     Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
   </Typography>
 )}
-<Box sx={{ height: 264, flexGrow: 1 }}>
+<Box sx={{ minHeight: 200, flexGrow: 1 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     onNodeExpansionToggle={handleNodeExpansionToggle}

diff --git a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.js
@@ -25,7 +25,7 @@ const MUI_X_PRODUCTS = [
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx b/docs/data/tree-view/rich-tree-view/items/BasicRichTreeView.tsx
@@ -25,7 +25,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function BasicRichTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js b/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.js
@@ -66,7 +66,7 @@ export default function DisabledItemsFocusable() {
           label="Allow focusing disabled items"
         />
       </Box>
-      <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           isItemDisabled={isItemDisabled}

diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.tsx b/docs/data/tree-view/rich-tree-view/items/DisabledItemsFocusable.tsx
@@ -72,7 +72,7 @@ export default function DisabledItemsFocusable() {
           label="Allow focusing disabled items"
         />
       </Box>
-      <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           isItemDisabled={isItemDisabled}

diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.js b/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.js
@@ -46,7 +46,7 @@ const isItemDisabled = (item) => !!item.disabled;
 
 export default function DisabledPropItem() {
   return (
-    <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} isItemDisabled={isItemDisabled} />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx b/docs/data/tree-view/rich-tree-view/items/DisabledPropItem.tsx
@@ -52,7 +52,7 @@ const isItemDisabled = (item: MuiXProduct) => !!item.disabled;
 
 export default function DisabledPropItem() {
   return (
-    <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} isItemDisabled={isItemDisabled} />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemId.js b/docs/data/tree-view/rich-tree-view/items/GetItemId.js
@@ -27,7 +27,7 @@ const getItemId = (item) => item.internalId;
 
 export default function GetItemId() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemId={getItemId} />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx b/docs/data/tree-view/rich-tree-view/items/GetItemId.tsx
@@ -32,7 +32,7 @@ const getItemId = (item: MuiXProduct) => item.internalId;
 
 export default function GetItemId() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemId={getItemId} />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.js
@@ -27,7 +27,7 @@ const getItemLabel = (item) => item.name;
 
 export default function GetItemLabel() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemLabel={getItemLabel} />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx b/docs/data/tree-view/rich-tree-view/items/GetItemLabel.tsx
@@ -32,7 +32,7 @@ const getItemLabel = (item: MuiXProduct) => item.name;
 
 export default function GetItemLabel() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView items={MUI_X_PRODUCTS} getItemLabel={getItemLabel} />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.js
@@ -65,7 +65,7 @@ export default function ControlledSelection() {
           {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           selectedNodes={selectedNodes}

diff --git a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx
@@ -66,7 +66,7 @@ export default function ControlledSelection() {
           {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           selectedNodes={selectedNodes}

diff --git a/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview b/docs/data/tree-view/rich-tree-view/selection/ControlledSelection.tsx.preview
@@ -3,7 +3,7 @@
     {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
   </Button>
 </Box>
-<Box sx={{ height: 264, flexGrow: 1 }}>
+<Box sx={{ minHeight: 200, flexGrow: 1 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     selectedNodes={selectedNodes}

diff --git a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.js
@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS = [
 
 export default function DisableSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView disableSelection items={MUI_X_PRODUCTS} />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx b/docs/data/tree-view/rich-tree-view/selection/DisableSelection.tsx
@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function DisableSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView disableSelection items={MUI_X_PRODUCTS} />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.js
@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS = [
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView multiSelect items={MUI_X_PRODUCTS} />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx b/docs/data/tree-view/rich-tree-view/selection/MultiSelectTreeView.tsx
@@ -34,7 +34,7 @@ const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <RichTreeView multiSelect items={MUI_X_PRODUCTS} />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.js b/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.js
@@ -51,7 +51,7 @@ export default function TrackNodeSelectionToggle() {
           ? 'No node selection recorded'
           : `Last selected node: ${lastSelectedNode}`}
       </Typography>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, minWidth: 250, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onNodeSelectionToggle={handleNodeSelectionToggle}

diff --git a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx b/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx
@@ -57,7 +57,7 @@ export default function TrackNodeSelectionToggle() {
           ? 'No node selection recorded'
           : `Last selected node: ${lastSelectedNode}`}
       </Typography>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, minWidth: 250, flexGrow: 1 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
           onNodeSelectionToggle={handleNodeSelectionToggle}

diff --git a/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx.preview b/docs/data/tree-view/rich-tree-view/selection/TrackNodeSelectionToggle.tsx.preview
@@ -3,7 +3,7 @@
     ? 'No node selection recorded'
     : `Last selected node: ${lastSelectedNode}`}
 </Typography>
-<Box sx={{ height: 264, flexGrow: 1 }}>
+<Box sx={{ minHeight: 200, minWidth: 250, flexGrow: 1 }}>
   <RichTreeView
     items={MUI_X_PRODUCTS}
     onNodeSelectionToggle={handleNodeSelectionToggle}

diff --git a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.js
@@ -38,7 +38,7 @@ export default function ControlledExpansion() {
           {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <SimpleTreeView
           expandedNodes={expandedNodes}
           onExpandedNodesChange={handleExpandedNodesChange}

diff --git a/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx b/docs/data/tree-view/simple-tree-view/expansion/ControlledExpansion.tsx
@@ -41,7 +41,7 @@ export default function ControlledExpansion() {
           {expandedNodes.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <SimpleTreeView
           expandedNodes={expandedNodes}
           onExpandedNodesChange={handleExpandedNodesChange}

diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.js
@@ -22,7 +22,7 @@ export default function TrackNodeExpansionToggle() {
         </Typography>
       )}
 
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <SimpleTreeView onNodeExpansionToggle={handleNodeExpansionToggle}>
           <TreeItem nodeId="grid" label="Data Grid">
             <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />

diff --git a/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx b/docs/data/tree-view/simple-tree-view/expansion/TrackNodeExpansionToggle.tsx
@@ -28,7 +28,7 @@ export default function TrackNodeExpansionToggle() {
           Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.nodeId}
         </Typography>
       )}
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <SimpleTreeView onNodeExpansionToggle={handleNodeExpansionToggle}>
           <TreeItem nodeId="grid" label="Data Grid">
             <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />

diff --git a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />

diff --git a/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx b/docs/data/tree-view/simple-tree-view/items/BasicSimpleTreeView.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function BasicSimpleTreeView() {
   return (
-    <Box sx={{ height: 168, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />

diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.js
@@ -25,7 +25,7 @@ export default function DisabledItemsFocusable() {
           label="Allow focusing disabled items"
         />
       </Box>
-      <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
         <SimpleTreeView disabledItemsFocusable={disabledItemsFocusable}>
           <TreeItem nodeId="grid" label="Data Grid">
             <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />

diff --git a/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx b/docs/data/tree-view/simple-tree-view/items/DisabledItemsFocusable.tsx
@@ -25,7 +25,7 @@ export default function DisabledItemsFocusable() {
           label="Allow focusing disabled items"
         />
       </Box>
-      <Box sx={{ height: 312, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
         <SimpleTreeView disabledItemsFocusable={disabledItemsFocusable}>
           <TreeItem nodeId="grid" label="Data Grid">
             <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />

diff --git a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.js
@@ -38,7 +38,7 @@ export default function ControlledSelection() {
           {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <SimpleTreeView
           selectedNodes={selectedNodes}
           onSelectedNodesChange={handleSelectedNodesChange}

diff --git a/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx b/docs/data/tree-view/simple-tree-view/selection/ControlledSelection.tsx
@@ -38,7 +38,7 @@ export default function ControlledSelection() {
           {selectedNodes.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
       </Box>
-      <Box sx={{ height: 264, flexGrow: 1 }}>
+      <Box sx={{ minHeight: 200, flexGrow: 1 }}>
         <SimpleTreeView
           selectedNodes={selectedNodes}
           onSelectedNodesChange={handleSelectedNodesChange}

diff --git a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function DisableSelection() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView disableSelection>
         <TreeItem nodeId="grid" label="Data Grid">
           <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />