From 26e281061352512bf9ec3033ed54d0d4ac89c985 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 7 Feb 2024 10:45:36 -0300
Subject: [PATCH 1/3] adjust all demos height to account for the updated design

---
 .../data-grid/editing/ValidateServerNameGrid.js | 11 ++++-------
 .../data-grid/row-ordering/RowOrderingGrid.js   | 15 ++++++---------
 .../ControlledSelectionServerPaginationGrid.js  |  9 +++------
 .../data-grid/tree-data/TreeDataLazyLoading.js  | 17 +++++++----------
 .../date-pickers/lifecycle/ServerInteraction.js |  4 ++--
 .../tree-view/getting-started/FirstComponent.js |  2 +-
 .../getting-started/FirstComponent.tsx          |  2 +-
 .../getting-started/FirstComponent.tsx.preview  |  2 +-
 .../tree-view/overview/BasicRichTreeView.js     |  2 +-
 .../tree-view/overview/BasicRichTreeView.tsx    |  2 +-
 .../tree-view/overview/BasicSimpleTreeView.js   |  2 +-
 .../tree-view/overview/BasicSimpleTreeView.tsx  |  2 +-
 .../expansion/ControlledExpansion.js            |  2 +-
 .../expansion/ControlledExpansion.tsx           |  2 +-
 .../expansion/ControlledExpansion.tsx.preview   |  2 +-
 .../expansion/TrackNodeExpansionToggle.js       |  2 +-
 .../expansion/TrackNodeExpansionToggle.tsx      |  2 +-
 .../TrackNodeExpansionToggle.tsx.preview        |  2 +-
 .../rich-tree-view/items/BasicRichTreeView.js   |  2 +-
 .../rich-tree-view/items/BasicRichTreeView.tsx  |  2 +-
 .../items/DisabledItemsFocusable.js             |  2 +-
 .../items/DisabledItemsFocusable.tsx            |  2 +-
 .../rich-tree-view/items/DisabledPropItem.js    |  2 +-
 .../rich-tree-view/items/DisabledPropItem.tsx   |  2 +-
 .../tree-view/rich-tree-view/items/GetItemId.js |  2 +-
 .../rich-tree-view/items/GetItemId.tsx          |  2 +-
 .../rich-tree-view/items/GetItemLabel.js        |  2 +-
 .../rich-tree-view/items/GetItemLabel.tsx       |  2 +-
 .../selection/ControlledSelection.js            |  2 +-
 .../selection/ControlledSelection.tsx           |  2 +-
 .../selection/ControlledSelection.tsx.preview   |  2 +-
 .../selection/DisableSelection.js               |  2 +-
 .../selection/DisableSelection.tsx              |  2 +-
 .../selection/MultiSelectTreeView.js            |  2 +-
 .../selection/MultiSelectTreeView.tsx           |  2 +-
 .../selection/TrackNodeSelectionToggle.js       |  2 +-
 .../selection/TrackNodeSelectionToggle.tsx      |  2 +-
 .../TrackNodeSelectionToggle.tsx.preview        |  2 +-
 .../expansion/ControlledExpansion.js            |  2 +-
 .../expansion/ControlledExpansion.tsx           |  2 +-
 .../expansion/TrackNodeExpansionToggle.js       |  2 +-
 .../expansion/TrackNodeExpansionToggle.tsx      |  2 +-
 .../items/BasicSimpleTreeView.js                |  2 +-
 .../items/BasicSimpleTreeView.tsx               |  2 +-
 .../items/DisabledItemsFocusable.js             |  2 +-
 .../items/DisabledItemsFocusable.tsx            |  2 +-
 .../selection/ControlledSelection.js            |  2 +-
 .../selection/ControlledSelection.tsx           |  2 +-
 .../selection/DisableSelection.js               |  2 +-
 .../selection/DisableSelection.tsx              |  2 +-
 .../selection/MultiSelectTreeView.js            |  2 +-
 .../selection/MultiSelectTreeView.tsx           |  2 +-
 .../selection/TrackNodeSelectionToggle.js       |  2 +-
 .../selection/TrackNodeSelectionToggle.tsx      |  2 +-
 54 files changed, 71 insertions(+), 83 deletions(-)

diff --git a/docs/data/data-grid/editing/ValidateServerNameGrid.js b/docs/data/data-grid/editing/ValidateServerNameGrid.js
index 050f0b161ceb..4c76fa35df18 100644
--- a/docs/data/data-grid/editing/ValidateServerNameGrid.js
+++ b/docs/data/data-grid/editing/ValidateServerNameGrid.js
@@ -23,13 +23,10 @@ function validateName(username) {
   const existingUsers = rows.map((row) => row.name.toLowerCase());
 
   return new Promise((resolve) => {
-    promiseTimeout = setTimeout(
-      () => {
-        const exists = existingUsers.includes(username.toLowerCase());
-        resolve(exists ? `${username} is already taken.` : null);
-      },
-      Math.random() * 500 + 100,
-    ); // simulate network latency
+    promiseTimeout = setTimeout(() => {
+      const exists = existingUsers.includes(username.toLowerCase());
+      resolve(exists ? `${username} is already taken.` : null);
+    }, Math.random() * 500 + 100); // simulate network latency
   });
 }
 
diff --git a/docs/data/data-grid/row-ordering/RowOrderingGrid.js b/docs/data/data-grid/row-ordering/RowOrderingGrid.js
index 6e09aa15ce09..dad7b0f4df7c 100644
--- a/docs/data/data-grid/row-ordering/RowOrderingGrid.js
+++ b/docs/data/data-grid/row-ordering/RowOrderingGrid.js
@@ -4,15 +4,12 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 
 function updateRowPosition(initialIndex, newIndex, rows) {
   return new Promise((resolve) => {
-    setTimeout(
-      () => {
-        const rowsClone = [...rows];
-        const row = rowsClone.splice(initialIndex, 1)[0];
-        rowsClone.splice(newIndex, 0, row);
-        resolve(rowsClone);
-      },
-      Math.random() * 500 + 100,
-    ); // simulate network latency
+    setTimeout(() => {
+      const rowsClone = [...rows];
+      const row = rowsClone.splice(initialIndex, 1)[0];
+      rowsClone.splice(newIndex, 0, row);
+      resolve(rowsClone);
+    }, Math.random() * 500 + 100); // simulate network latency
   });
 }
 
diff --git a/docs/data/data-grid/row-selection/ControlledSelectionServerPaginationGrid.js b/docs/data/data-grid/row-selection/ControlledSelectionServerPaginationGrid.js
index 61140ac8c5b8..3a6540ab8bb9 100644
--- a/docs/data/data-grid/row-selection/ControlledSelectionServerPaginationGrid.js
+++ b/docs/data/data-grid/row-selection/ControlledSelectionServerPaginationGrid.js
@@ -4,12 +4,9 @@ import { useDemoData, randomInt } from '@mui/x-data-grid-generator';
 
 function loadServerRows(page, data) {
   return new Promise((resolve) => {
-    setTimeout(
-      () => {
-        resolve(data.rows.slice(page * 5, (page + 1) * 5));
-      },
-      randomInt(100, 600),
-    ); // simulate network latency
+    setTimeout(() => {
+      resolve(data.rows.slice(page * 5, (page + 1) * 5));
+    }, randomInt(100, 600)); // simulate network latency
   });
 }
 
diff --git a/docs/data/data-grid/tree-data/TreeDataLazyLoading.js b/docs/data/data-grid/tree-data/TreeDataLazyLoading.js
index ea3f9c8fd2a4..bf820860f487 100644
--- a/docs/data/data-grid/tree-data/TreeDataLazyLoading.js
+++ b/docs/data/data-grid/tree-data/TreeDataLazyLoading.js
@@ -134,16 +134,13 @@ const getChildren = (parentPath) => {
  */
 const fakeDataFetcher = (parentPath = []) =>
   new Promise((resolve) => {
-    setTimeout(
-      () => {
-        const rows = getChildren(parentPath).map((row) => ({
-          ...row,
-          descendantCount: getChildren(row.hierarchy).length,
-        }));
-        resolve(rows);
-      },
-      500 + Math.random() * 300,
-    );
+    setTimeout(() => {
+      const rows = getChildren(parentPath).map((row) => ({
+        ...row,
+        descendantCount: getChildren(row.hierarchy).length,
+      }));
+      resolve(rows);
+    }, 500 + Math.random() * 300);
   });
 
 const LoadingContainer = styled('div')({
diff --git a/docs/data/date-pickers/lifecycle/ServerInteraction.js b/docs/data/date-pickers/lifecycle/ServerInteraction.js
index e3ce3e846db6..86733860cc21 100644
--- a/docs/data/date-pickers/lifecycle/ServerInteraction.js
+++ b/docs/data/date-pickers/lifecycle/ServerInteraction.js
@@ -24,8 +24,8 @@ function DisplayEvents(props) {
                 value === null
                   ? 'null'
                   : value.isValid()
-                    ? value.format('DD/MM/YYYY')
-                    : 'Invalid Date'
+                  ? value.format('DD/MM/YYYY')
+                  : 'Invalid Date'
               }`,
           )
           .join('\n')}
diff --git a/docs/data/tree-view/getting-started/FirstComponent.js b/docs/data/tree-view/getting-started/FirstComponent.js
index f298d80d737d..ade354baeab4 100644
--- 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
index f298d80d737d..ade354baeab4 100644
--- 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
index 80d9ff4dc140..b31f963565f8 100644
--- 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
index 3af5afeaf5c7..6891094201b0 100644
--- 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
index 644205c6ffdc..5f89f65503c3 100644
--- 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
index ae254b6877f5..e45b830807df 100644
--- 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
index ae254b6877f5..e45b830807df 100644
--- 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
index 063312287ef5..a85a4005de93 100644
--- 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
index cdd69e36b2ff..3ab5ceda3eee 100644
--- 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
index 70f0f60d7ef5..23c1b30b2f8d 100644
--- 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
index 7f45db3398c0..5712834a0ada 100644
--- 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
index 3c1091875569..d0bfded863e4 100644
--- 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
index 535a5e1f2bbe..d4aa558e09aa 100644
--- 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
index 3af5afeaf5c7..1758169287e6 100644
--- 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
index 644205c6ffdc..12357940fd8b 100644
--- 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
index 92ba89af8ef8..01d3c61bd5f5 100644
--- 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
index 5127f67241f0..47525b38aedd 100644
--- 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
index 6477e0c302e0..07994b675ecb 100644
--- 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
index f1ab2b1335e3..5d5b0a2a9c62 100644
--- 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
index c1db4c61e4b7..72a50eaeb7e6 100644
--- 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
index 105405ea2ac2..deca6e972944 100644
--- 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
index 1a6511a06a70..830a78258204 100644
--- 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
index de5f01ef25bb..0d6815d0d677 100644
--- 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
index a8d9d0d100b2..392ad5ede863 100644
--- 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
index d8de02d814df..a51fddb2f7b9 100644
--- 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
index edaf87ee644d..05dbf38354c7 100644
--- 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
index c403c5c78ca3..0f9b7cec775a 100644
--- 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
index 78f8b569e6b6..1d5186c76542 100644
--- 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
index 7d74d64e6879..a873643c428d 100644
--- 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
index 72ba5375d5bd..e66daa1db645 100644
--- 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
index 891709293c47..fdf2cb447ca6 100644
--- 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
index 7f151f72afcc..dc49b176b84a 100644
--- 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
index 78685ef7036b..a7ad6e6419ce 100644
--- 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
index b9a5851e126d..f80d1f35a548 100644
--- 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
index e7493025fa3b..369e4a0439f2 100644
--- 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
index 5836d5a55c00..255c0efbb54b 100644
--- 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
index 5c6d8485d40c..3cdf96e2b5fc 100644
--- 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
index ae254b6877f5..e45b830807df 100644
--- 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
index ae254b6877f5..e45b830807df 100644
--- 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
index 8c35d4ebaadf..9277addefe8d 100644
--- 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
index 1434931f4086..f70a8450a3c1 100644
--- 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
index 935118837b17..9a9e18844b02 100644
--- 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
index 26516e7546c4..3f5fe3e4619f 100644
--- 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
index 6f461015bc97..c5888258fb7b 100644
--- 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" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx
index 6f461015bc97..c5888258fb7b 100644
--- a/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/DisableSelection.tsx
@@ -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" />
diff --git a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js
index 1ac08c85b55f..d960923d3502 100644
--- a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js
+++ b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.js
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView multiSelect>
         <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/MultiSelectTreeView.tsx b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx
index 1ac08c85b55f..d960923d3502 100644
--- a/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/MultiSelectTreeView.tsx
@@ -5,7 +5,7 @@ import { TreeItem } from '@mui/x-tree-view/TreeItem';
 
 export default function MultiSelectTreeView() {
   return (
-    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+    <Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
       <SimpleTreeView multiSelect>
         <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/TrackNodeSelectionToggle.js b/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.js
index 7e77949a5248..4fd35b6b0b25 100644
--- a/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.js
+++ b/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.js
@@ -21,7 +21,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 }}>
         <SimpleTreeView onNodeSelectionToggle={handleNodeSelectionToggle}>
           <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/TrackNodeSelectionToggle.tsx b/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.tsx
index db772b2839cc..f978231c95ad 100644
--- a/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.tsx
+++ b/docs/data/tree-view/simple-tree-view/selection/TrackNodeSelectionToggle.tsx
@@ -27,7 +27,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 }}>
         <SimpleTreeView onNodeSelectionToggle={handleNodeSelectionToggle}>
           <TreeItem nodeId="grid" label="Data Grid">
             <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />

From 19b6c1e8a2f18c9c5e4614a9575a99c74b929ea6 Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Wed, 14 Feb 2024 16:23:30 +0100
Subject: [PATCH 2/3] run prettier

---
 .../data-grid/editing/ValidateServerNameGrid.js | 11 +++++++----
 .../ControlledSelectionServerPaginationGrid.js  |  9 ++++++---
 .../data-grid/tree-data/TreeDataLazyLoading.js  | 17 ++++++++++-------
 .../date-pickers/lifecycle/ServerInteraction.js |  4 ++--
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/docs/data/data-grid/editing/ValidateServerNameGrid.js b/docs/data/data-grid/editing/ValidateServerNameGrid.js
index 4c76fa35df18..050f0b161ceb 100644
--- a/docs/data/data-grid/editing/ValidateServerNameGrid.js
+++ b/docs/data/data-grid/editing/ValidateServerNameGrid.js
@@ -23,10 +23,13 @@ function validateName(username) {
   const existingUsers = rows.map((row) => row.name.toLowerCase());
 
   return new Promise((resolve) => {
-    promiseTimeout = setTimeout(() => {
-      const exists = existingUsers.includes(username.toLowerCase());
-      resolve(exists ? `${username} is already taken.` : null);
-    }, Math.random() * 500 + 100); // simulate network latency
+    promiseTimeout = setTimeout(
+      () => {
+        const exists = existingUsers.includes(username.toLowerCase());
+        resolve(exists ? `${username} is already taken.` : null);
+      },
+      Math.random() * 500 + 100,
+    ); // simulate network latency
   });
 }
 
diff --git a/docs/data/data-grid/row-selection/ControlledSelectionServerPaginationGrid.js b/docs/data/data-grid/row-selection/ControlledSelectionServerPaginationGrid.js
index 3a6540ab8bb9..61140ac8c5b8 100644
--- a/docs/data/data-grid/row-selection/ControlledSelectionServerPaginationGrid.js
+++ b/docs/data/data-grid/row-selection/ControlledSelectionServerPaginationGrid.js
@@ -4,9 +4,12 @@ import { useDemoData, randomInt } from '@mui/x-data-grid-generator';
 
 function loadServerRows(page, data) {
   return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(data.rows.slice(page * 5, (page + 1) * 5));
-    }, randomInt(100, 600)); // simulate network latency
+    setTimeout(
+      () => {
+        resolve(data.rows.slice(page * 5, (page + 1) * 5));
+      },
+      randomInt(100, 600),
+    ); // simulate network latency
   });
 }
 
diff --git a/docs/data/data-grid/tree-data/TreeDataLazyLoading.js b/docs/data/data-grid/tree-data/TreeDataLazyLoading.js
index bf820860f487..ea3f9c8fd2a4 100644
--- a/docs/data/data-grid/tree-data/TreeDataLazyLoading.js
+++ b/docs/data/data-grid/tree-data/TreeDataLazyLoading.js
@@ -134,13 +134,16 @@ const getChildren = (parentPath) => {
  */
 const fakeDataFetcher = (parentPath = []) =>
   new Promise((resolve) => {
-    setTimeout(() => {
-      const rows = getChildren(parentPath).map((row) => ({
-        ...row,
-        descendantCount: getChildren(row.hierarchy).length,
-      }));
-      resolve(rows);
-    }, 500 + Math.random() * 300);
+    setTimeout(
+      () => {
+        const rows = getChildren(parentPath).map((row) => ({
+          ...row,
+          descendantCount: getChildren(row.hierarchy).length,
+        }));
+        resolve(rows);
+      },
+      500 + Math.random() * 300,
+    );
   });
 
 const LoadingContainer = styled('div')({
diff --git a/docs/data/date-pickers/lifecycle/ServerInteraction.js b/docs/data/date-pickers/lifecycle/ServerInteraction.js
index 86733860cc21..e3ce3e846db6 100644
--- a/docs/data/date-pickers/lifecycle/ServerInteraction.js
+++ b/docs/data/date-pickers/lifecycle/ServerInteraction.js
@@ -24,8 +24,8 @@ function DisplayEvents(props) {
                 value === null
                   ? 'null'
                   : value.isValid()
-                  ? value.format('DD/MM/YYYY')
-                  : 'Invalid Date'
+                    ? value.format('DD/MM/YYYY')
+                    : 'Invalid Date'
               }`,
           )
           .join('\n')}

From 48e56cc4c6bfec0db98165b4468547e90e0603c6 Mon Sep 17 00:00:00 2001
From: noraleonte <noraleonte00@gmail.com>
Date: Thu, 15 Feb 2024 16:41:12 +0200
Subject: [PATCH 3/3] fix

---
 .../data-grid/row-ordering/RowOrderingGrid.js     | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/docs/data/data-grid/row-ordering/RowOrderingGrid.js b/docs/data/data-grid/row-ordering/RowOrderingGrid.js
index dad7b0f4df7c..6e09aa15ce09 100644
--- a/docs/data/data-grid/row-ordering/RowOrderingGrid.js
+++ b/docs/data/data-grid/row-ordering/RowOrderingGrid.js
@@ -4,12 +4,15 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 
 function updateRowPosition(initialIndex, newIndex, rows) {
   return new Promise((resolve) => {
-    setTimeout(() => {
-      const rowsClone = [...rows];
-      const row = rowsClone.splice(initialIndex, 1)[0];
-      rowsClone.splice(newIndex, 0, row);
-      resolve(rowsClone);
-    }, Math.random() * 500 + 100); // simulate network latency
+    setTimeout(
+      () => {
+        const rowsClone = [...rows];
+        const row = rowsClone.splice(initialIndex, 1)[0];
+        rowsClone.splice(newIndex, 0, row);
+        resolve(rowsClone);
+      },
+      Math.random() * 500 + 100,
+    ); // simulate network latency
   });
 }