From 253a128269257952f4badf7b6a2d138db906ca4d Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskyi <andrew@mui.com>
Date: Tue, 8 Oct 2024 22:01:17 +0200
Subject: [PATCH 1/2] fix detailPanel size

---
 .../master-detail/FullWidthDetailPanel.js     | 18 ++++++++++++------
 .../master-detail/FullWidthDetailPanel.tsx    | 19 +++++++++++++------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js
index 29c1e9a080c47..99a89e17cffcc 100644
--- a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js
+++ b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js
@@ -20,16 +20,22 @@ import {
   randomCommodity,
 } from '@mui/x-data-grid-generator';
 
+const getDetailPanelWidth = (gridDimensions) => {
+  return (
+    gridDimensions.viewportInnerSize.width +
+    gridDimensions.leftPinnedWidth +
+    gridDimensions.rightPinnedWidth
+  );
+};
+
 function DetailPanelContent({ row: rowProp }) {
   const apiRef = useGridApiContext();
-  const [width, setWidth] = React.useState(() => {
-    const dimensions = apiRef.current.getRootDimensions();
-    return dimensions.viewportInnerSize.width;
-  });
+  const [width, setWidth] = React.useState(() =>
+    getDetailPanelWidth(apiRef.current.getRootDimensions()),
+  );
 
   const handleViewportInnerSizeChange = React.useCallback(() => {
-    const dimensions = apiRef.current.getRootDimensions();
-    setWidth(dimensions.viewportInnerSize.width);
+    setWidth(getDetailPanelWidth(apiRef.current.getRootDimensions()));
   }, [apiRef]);
 
   React.useEffect(() => {
diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx b/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx
index 6f09b27b24043..19a51c77e061d 100644
--- a/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx
+++ b/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx
@@ -10,6 +10,7 @@ import {
   GridRowParams,
   GRID_DETAIL_PANEL_TOGGLE_FIELD,
   GridPinnedColumnFields,
+  GridDimensions,
 } from '@mui/x-data-grid-pro';
 import {
   randomCreatedDate,
@@ -23,16 +24,22 @@ import {
   randomCommodity,
 } from '@mui/x-data-grid-generator';
 
+const getDetailPanelWidth = (gridDimensions: GridDimensions) => {
+  return (
+    gridDimensions.viewportInnerSize.width +
+    gridDimensions.leftPinnedWidth +
+    gridDimensions.rightPinnedWidth
+  );
+};
+
 function DetailPanelContent({ row: rowProp }: { row: Customer }) {
   const apiRef = useGridApiContext();
-  const [width, setWidth] = React.useState(() => {
-    const dimensions = apiRef.current.getRootDimensions();
-    return dimensions.viewportInnerSize.width;
-  });
+  const [width, setWidth] = React.useState(() =>
+    getDetailPanelWidth(apiRef.current.getRootDimensions()),
+  );
 
   const handleViewportInnerSizeChange = React.useCallback(() => {
-    const dimensions = apiRef.current.getRootDimensions();
-    setWidth(dimensions.viewportInnerSize.width);
+    setWidth(getDetailPanelWidth(apiRef.current.getRootDimensions()));
   }, [apiRef]);
 
   React.useEffect(() => {

From 2792890242a25151a0796c985542f616da01d715 Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskyi <andrew@mui.com>
Date: Tue, 8 Oct 2024 22:03:59 +0200
Subject: [PATCH 2/2] use initialState instead of controlled model

it's simpler
---
 .../master-detail/FullWidthDetailPanel.js     | 15 +++++----------
 .../master-detail/FullWidthDetailPanel.tsx    | 19 +++++--------------
 .../FullWidthDetailPanel.tsx.preview          |  7 +++++--
 3 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js
index 99a89e17cffcc..83a4aee6f6d12 100644
--- a/docs/data/data-grid/master-detail/FullWidthDetailPanel.js
+++ b/docs/data/data-grid/master-detail/FullWidthDetailPanel.js
@@ -202,21 +202,16 @@ export default function FullWidthDetailPanel() {
 
   const getDetailPanelHeight = React.useCallback(() => 400, []);
 
-  const [pinnedColumns, setPinnedColumns] = React.useState({
-    left: [GRID_DETAIL_PANEL_TOGGLE_FIELD],
-  });
-
-  const handlePinnedColumnsChange = React.useCallback((updatedPinnedColumns) => {
-    setPinnedColumns(updatedPinnedColumns);
-  }, []);
-
   return (
     <Box sx={{ width: '100%', height: 400 }}>
       <DataGridPro
         columns={columns}
         rows={rows}
-        pinnedColumns={pinnedColumns}
-        onPinnedColumnsChange={handlePinnedColumnsChange}
+        initialState={{
+          pinnedColumns: {
+            left: [GRID_DETAIL_PANEL_TOGGLE_FIELD],
+          },
+        }}
         getDetailPanelHeight={getDetailPanelHeight}
         getDetailPanelContent={getDetailPanelContent}
         sx={{
diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx b/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx
index 19a51c77e061d..aa30837bb4ac9 100644
--- a/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx
+++ b/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx
@@ -9,7 +9,6 @@ import {
   useGridApiContext,
   GridRowParams,
   GRID_DETAIL_PANEL_TOGGLE_FIELD,
-  GridPinnedColumnFields,
   GridDimensions,
 } from '@mui/x-data-grid-pro';
 import {
@@ -208,24 +207,16 @@ export default function FullWidthDetailPanel() {
 
   const getDetailPanelHeight = React.useCallback(() => 400, []);
 
-  const [pinnedColumns, setPinnedColumns] = React.useState<GridPinnedColumnFields>({
-    left: [GRID_DETAIL_PANEL_TOGGLE_FIELD],
-  });
-
-  const handlePinnedColumnsChange = React.useCallback(
-    (updatedPinnedColumns: GridPinnedColumnFields) => {
-      setPinnedColumns(updatedPinnedColumns);
-    },
-    [],
-  );
-
   return (
     <Box sx={{ width: '100%', height: 400 }}>
       <DataGridPro
         columns={columns}
         rows={rows}
-        pinnedColumns={pinnedColumns}
-        onPinnedColumnsChange={handlePinnedColumnsChange}
+        initialState={{
+          pinnedColumns: {
+            left: [GRID_DETAIL_PANEL_TOGGLE_FIELD],
+          },
+        }}
         getDetailPanelHeight={getDetailPanelHeight}
         getDetailPanelContent={getDetailPanelContent}
         sx={{
diff --git a/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx.preview b/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx.preview
index 2c01bcfd43ca4..7a9ff7968751a 100644
--- a/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx.preview
+++ b/docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx.preview
@@ -1,8 +1,11 @@
 <DataGridPro
   columns={columns}
   rows={rows}
-  pinnedColumns={pinnedColumns}
-  onPinnedColumnsChange={handlePinnedColumnsChange}
+  initialState={{
+    pinnedColumns: {
+      left: [GRID_DETAIL_PANEL_TOGGLE_FIELD],
+    },
+  }}
   getDetailPanelHeight={getDetailPanelHeight}
   getDetailPanelContent={getDetailPanelContent}
   sx={{