[docs] Fix mobile scrollbar column resize (#10455)

mui · Sep 24, 2023 · 85460fb · 85460fb
1 parent 3d6052f
commit 85460fb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizing.js b/docs/data/data-grid/column-dimensions/ColumnAutosizing.js
@@ -70,10 +70,12 @@ export default function ColumnAutosizing() {
   return (
     <div style={{ width: '100%' }}>
       <Stack
-        spacing={2}
+        spacing={1}
         direction="row"
         alignItems="center"
-        sx={{ marginBottom: '1em' }}
+        sx={{ mb: 1 }}
+        useFlexGap
+        flexWrap="wrap"
       >
         <Button
           variant="outlined"
@@ -82,6 +84,7 @@ export default function ColumnAutosizing() {
           Autosize columns
         </Button>
         <FormControlLabel
+          sx={{ ml: 0 }}
           control={
             <Checkbox
               checked={includeHeaders}
@@ -91,6 +94,7 @@ export default function ColumnAutosizing() {
           label="Include headers"
         />
         <FormControlLabel
+          sx={{ ml: 0 }}
           control={
             <Checkbox
               checked={includeOutliers}
@@ -107,6 +111,7 @@ export default function ColumnAutosizing() {
           sx={{ width: '12ch' }}
         />
         <FormControlLabel
+          sx={{ ml: 0 }}
           control={
             <Checkbox
               checked={expand}

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx
@@ -73,10 +73,12 @@ export default function ColumnAutosizing() {
   return (
     <div style={{ width: '100%' }}>
       <Stack
-        spacing={2}
+        spacing={1}
         direction="row"
         alignItems="center"
-        sx={{ marginBottom: '1em' }}
+        sx={{ mb: 1 }}
+        useFlexGap
+        flexWrap="wrap"
       >
         <Button
           variant="outlined"
@@ -85,6 +87,7 @@ export default function ColumnAutosizing() {
           Autosize columns
         </Button>
         <FormControlLabel
+          sx={{ ml: 0 }}
           control={
             <Checkbox
               checked={includeHeaders}
@@ -94,6 +97,7 @@ export default function ColumnAutosizing() {
           label="Include headers"
         />
         <FormControlLabel
+          sx={{ ml: 0 }}
           control={
             <Checkbox
               checked={includeOutliers}
@@ -110,6 +114,7 @@ export default function ColumnAutosizing() {
           sx={{ width: '12ch' }}
         />
         <FormControlLabel
+          sx={{ ml: 0 }}
           control={
             <Checkbox
               checked={expand}