From ef71664ecb614e8465948a394289303ad87f9015 Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Thu, 30 May 2024 09:51:20 -0400
Subject: [PATCH 01/13] fix: it

---
 .../virtualization/GridVirtualScroller.tsx    |  2 +-
 .../GridVirtualScrollerFiller.tsx             | 26 ++++++++++++++-----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
index aa17ed93be6d9..190a488fac7f5 100644
--- a/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
+++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
@@ -95,7 +95,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
           </RenderZone>
         </Content>
 
-        {rows.length > 0 && <SpaceFiller />}
+        <SpaceFiller rowsLength={rows.length} />
 
         <BottomContainer>
           <rootProps.slots.pinnedRows position="bottom" virtualScroller={virtualScroller} />
diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
index eeaafcdd67ada..718a449a6ee54 100644
--- a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
+++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
@@ -17,24 +17,29 @@ const Pinned = styled('div')({
   position: 'sticky',
   height: '100%',
   boxSizing: 'border-box',
-  borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+  borderTop: '1px solid var(--rowBorderColor)',
   backgroundColor: 'var(--DataGrid-pinnedBackground)',
 });
 const PinnedLeft = styled(Pinned)({
   left: 0,
-  borderRight: '1px solid var(--DataGrid-rowBorderColor)',
+  borderRight: '1px solid var(--rowBorderColor)',
 });
 const PinnedRight = styled(Pinned)({
   right: 0,
-  borderLeft: '1px solid var(--DataGrid-rowBorderColor)',
+  borderLeft: '1px solid var(--rowBorderColor)',
 });
 
 const Main = styled('div')({
   flexGrow: 1,
-  borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+  borderTop: '1px solid var(--rowBorderColor)',
 });
 
-function GridVirtualScrollerFiller() {
+type Props = {
+  /** The number of rows */
+  rowsLength: number;
+};
+
+function GridVirtualScrollerFiller({ rowsLength }: Props) {
   const apiRef = useGridApiContext();
   const {
     viewportOuterSize,
@@ -54,7 +59,16 @@ function GridVirtualScrollerFiller() {
   }
 
   return (
-    <Filler className={gridClasses.filler} role="presentation" style={{ height }}>
+    <Filler
+      className={gridClasses.filler}
+      role="presentation"
+      style={
+        {
+          height,
+          '--rowBorderColor': rowsLength === 0 ? 'transparent' : 'var(--DataGrid-rowBorderColor)',
+        } as React.CSSProperties
+      }
+    >
       {leftPinnedWidth > 0 && (
         <PinnedLeft
           className={gridClasses['filler--pinnedLeft']}

From 937d64ab371ebdd92f05959845b39eeda15f40b3 Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Tue, 18 Jun 2024 00:32:49 -0400
Subject: [PATCH 02/13] fix: overlay height

---
 packages/x-data-grid/src/components/base/GridOverlays.tsx      | 3 ++-
 .../components/virtualization/GridVirtualScrollerFiller.tsx    | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/x-data-grid/src/components/base/GridOverlays.tsx b/packages/x-data-grid/src/components/base/GridOverlays.tsx
index 2e214bc219ff4..11583775ee126 100644
--- a/packages/x-data-grid/src/components/base/GridOverlays.tsx
+++ b/packages/x-data-grid/src/components/base/GridOverlays.tsx
@@ -62,7 +62,8 @@ function GridOverlayWrapper(props: React.PropsWithChildren<{ overlayType: string
 
   let height: React.CSSProperties['height'] =
     dimensions.viewportOuterSize.height -
-    dimensions.headersTotalHeight -
+    dimensions.topContainerHeight -
+    dimensions.bottomContainerHeight -
     (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
 
   if ((rootProps.autoHeight && currentPage.rows.length === 0) || height === 0) {
diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
index 718a449a6ee54..5cc620dc1faa7 100644
--- a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
+++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
@@ -64,7 +64,7 @@ function GridVirtualScrollerFiller({ rowsLength }: Props) {
       role="presentation"
       style={
         {
-          height,
+          height: height - 1 /* border-top */,
           '--rowBorderColor': rowsLength === 0 ? 'transparent' : 'var(--DataGrid-rowBorderColor)',
         } as React.CSSProperties
       }

From 710aa2dffe20c0a8c368b945b56a03f964f5a87d Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Tue, 18 Jun 2024 04:53:28 -0400
Subject: [PATCH 03/13] fix: argos

---
 .../virtualization/GridVirtualScrollerFiller.tsx  |  2 +-
 .../virtualization/useGridVirtualScroller.tsx     | 15 +++------------
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
index 5cc620dc1faa7..2fffd636ae03c 100644
--- a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
+++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
@@ -64,7 +64,7 @@ function GridVirtualScrollerFiller({ rowsLength }: Props) {
       role="presentation"
       style={
         {
-          height: height - 1 /* border-top */,
+          height: height,
           '--rowBorderColor': rowsLength === 0 ? 'transparent' : 'var(--DataGrid-rowBorderColor)',
         } as React.CSSProperties
       }
diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
index be18719cafd7a..b23d06fbe19f8 100644
--- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -513,22 +513,13 @@ export const useGridVirtualScroller = () => {
   );
 
   const contentSize = React.useMemo(() => {
-    // In cases where the columns exceed the available width,
-    // the horizontal scrollbar should be shown even when there're no rows.
-    // Keeping 1px as minimum height ensures that the scrollbar will visible if necessary.
-    const height = Math.max(contentHeight, 1);
-
     const size: React.CSSProperties = {
       width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
-      height,
+      height: contentHeight,
     };
 
-    if (rootProps.autoHeight) {
-      if (currentPage.rows.length === 0) {
-        size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
-      } else {
-        size.height = contentHeight;
-      }
+    if (rootProps.autoHeight && currentPage.rows.length === 0) {
+      size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
     }
 
     return size;

From 2dff02f7fee340ec7a500194e9a29227cc27a2fb Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Tue, 18 Jun 2024 05:12:52 -0400
Subject: [PATCH 04/13] lint

---
 .../src/components/virtualization/GridVirtualScrollerFiller.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
index 2fffd636ae03c..718a449a6ee54 100644
--- a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
+++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx
@@ -64,7 +64,7 @@ function GridVirtualScrollerFiller({ rowsLength }: Props) {
       role="presentation"
       style={
         {
-          height: height,
+          height,
           '--rowBorderColor': rowsLength === 0 ? 'transparent' : 'var(--DataGrid-rowBorderColor)',
         } as React.CSSProperties
       }

From b609a82926d5c73883672bfc174741a4e04126f1 Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Wed, 19 Jun 2024 03:01:33 -0400
Subject: [PATCH 05/13] tests: fix warning

---
 .../tests/clipboard.DataGridPremium.test.tsx  | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
index 1be69796afddf..22cd738034d8d 100644
--- a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
+++ b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx
@@ -119,12 +119,14 @@ describe('<DataGridPremium /> - Clipboard', () => {
         { id: 2, brand: 'Puma' },
       ];
       render(
-        <DataGridPremium
-          columns={columns}
-          rows={rows}
-          cellSelection
-          sortModel={[{ field: 'brand', sort: 'asc' }]}
-        />,
+        <div style={{ width: 300, height: 300 }}>
+          <DataGridPremium
+            columns={columns}
+            rows={rows}
+            cellSelection
+            sortModel={[{ field: 'brand', sort: 'asc' }]}
+          />
+        </div>,
       );
 
       const cell = getCell(0, 0);
@@ -143,15 +145,17 @@ describe('<DataGridPremium /> - Clipboard', () => {
 
     it('should not escape double quotes when copying multiple cells to clipboard', () => {
       render(
-        <DataGridPremium
-          columns={[{ field: 'value' }]}
-          rows={[
-            { id: 0, value: '1 " 1' },
-            { id: 1, value: '2' },
-          ]}
-          cellSelection
-          disableRowSelectionOnClick
-        />,
+        <div style={{ width: 300, height: 300 }}>
+          <DataGridPremium
+            columns={[{ field: 'value' }]}
+            rows={[
+              { id: 0, value: '1 " 1' },
+              { id: 1, value: '2' },
+            ]}
+            cellSelection
+            disableRowSelectionOnClick
+          />
+        </div>,
       );
 
       const cell = getCell(0, 0);

From 18db7f74fe5f78f584151dd65fac0da4e47a81df Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Wed, 19 Jun 2024 03:03:54 -0400
Subject: [PATCH 06/13] test: add regression test

---
 .../data-grid/DataGridPinnedBottomRow.js      | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 test/regressions/data-grid/DataGridPinnedBottomRow.js

diff --git a/test/regressions/data-grid/DataGridPinnedBottomRow.js b/test/regressions/data-grid/DataGridPinnedBottomRow.js
new file mode 100644
index 0000000000000..1b3d5c71c9f58
--- /dev/null
+++ b/test/regressions/data-grid/DataGridPinnedBottomRow.js
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import {
+  randomCity,
+  randomEmail,
+  randomId,
+  randomInt,
+  randomTraderName,
+  randomUserName,
+} from '@mui/x-data-grid-generator';
+
+const columns = [
+  { field: 'name', headerName: 'Name', width: 150 },
+  { field: 'city', headerName: 'City', width: 150 },
+  { field: 'username', headerName: 'Username' },
+  { field: 'email', headerName: 'Email', width: 200 },
+  { field: 'age', type: 'number', headerName: 'Age' },
+];
+
+const rows = [];
+
+function getRow() {
+  return {
+    id: randomId(),
+    name: randomTraderName(),
+    city: randomCity(),
+    username: randomUserName(),
+    email: randomEmail(),
+    age: randomInt(10, 80),
+  };
+}
+
+const pinnedRows = {
+  top: [getRow()],
+  bottom: [getRow()],
+};
+
+export default function RowPinning() {
+  return (
+    <div style={{ height: 500, width: '100%' }}>
+      <DataGridPro columns={columns} rows={rows} pinnedRows={pinnedRows} />
+    </div>
+  );
+}

From ac2db525ca0aa269423733b9b7949ee64cdac53c Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Fri, 21 Jun 2024 06:11:34 -0400
Subject: [PATCH 07/13] test: fix one

---
 .../src/tests/pagination.DataGrid.test.tsx         | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
index a245d201ee943..ddd181f760c22 100644
--- a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
@@ -730,12 +730,14 @@ describe('<DataGrid /> - Pagination', () => {
     ];
     expect(() => {
       const { setProps } = render(
-        <DataGrid
-          columns={columns}
-          rows={rows}
-          initialState={{ pagination: { paginationModel: { pageSize: 2, page: 1 } } }}
-          pageSizeOptions={[2]}
-        />,
+        <div style={{ width: 300, height: 300 }}>
+          <DataGrid
+            columns={columns}
+            rows={rows}
+            initialState={{ pagination: { paginationModel: { pageSize: 2, page: 1 } } }}
+            pageSizeOptions={[2]}
+          />
+        </div>,
       );
       setProps({ rows: rows.slice(0, 2) });
     }).not.to.throw();

From bda12ed79e78b8fe13e50e8c7e5eebaaec69959e Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Fri, 5 Jul 2024 11:08:49 -0400
Subject: [PATCH 08/13] fix: test

---
 .../src/tests/pagination.DataGridPro.test.tsx               | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx
index 0f9a0952b616c..de93d15a5e6e1 100644
--- a/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx
@@ -105,7 +105,11 @@ describe('<DataGridPro /> - Pagination', () => {
 
   it('should log an error if rowCount is used with client-side pagination', () => {
     expect(() => {
-      render(<DataGridPro rows={[]} columns={[]} paginationMode="client" rowCount={100} />);
+      render(
+        <div style={{ width: 300, height: 300 }}>
+          <DataGridPro rows={[]} columns={[]} paginationMode="client" rowCount={100} />
+        </div>
+      );
     }).toErrorDev([
       'MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect. `rowCount` is only meant to be used with `paginationMode="server"`.',
     ]);

From e26c5abec23e4ce8b754fdcb0b87207069cc294e Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Fri, 5 Jul 2024 11:14:03 -0400
Subject: [PATCH 09/13] core: karma chrome bin

---
 test/karma.conf.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/karma.conf.js b/test/karma.conf.js
index 25c0eb8f68ec0..09f029b5467c5 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -3,7 +3,7 @@ const webpack = require('webpack');
 
 const CI = Boolean(process.env.CI);
 
-process.env.CHROME_BIN = chromium.executablePath();
+process.env.CHROME_BIN ||= chromium.executablePath();
 
 // Karma configuration
 module.exports = function setKarmaConfig(config) {

From 24a8285c3518262f05e2085a5f0e9749982b2653 Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Mon, 8 Jul 2024 19:08:03 -0400
Subject: [PATCH 10/13] test: fix

---
 .../x-data-grid/src/tests/DataGrid.test.tsx   | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/x-data-grid/src/tests/DataGrid.test.tsx b/packages/x-data-grid/src/tests/DataGrid.test.tsx
index f058407dc45fb..cef9fe12cf3a2 100644
--- a/packages/x-data-grid/src/tests/DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/DataGrid.test.tsx
@@ -76,19 +76,21 @@ describe('<DataGrid />', () => {
     ];
     expect(() => {
       render(
-        <DataGrid
-          {...(
-            Object.keys(DATA_GRID_PROPS_DEFAULT_VALUES) as Array<
-              keyof typeof DATA_GRID_PROPS_DEFAULT_VALUES
-            >
-          ).reduce((acc, key) => {
-            // @ts-ignore
-            acc[key] = undefined;
-            return acc;
-          }, {})}
-          rows={rows}
-          columns={columns}
-        />,
+        <div style={{ height: 300, width: 300 }}>
+          <DataGrid
+            {...(
+              Object.keys(DATA_GRID_PROPS_DEFAULT_VALUES) as Array<
+                keyof typeof DATA_GRID_PROPS_DEFAULT_VALUES
+              >
+            ).reduce((acc, key) => {
+              // @ts-ignore
+              acc[key] = undefined;
+              return acc;
+            }, {})}
+            rows={rows}
+            columns={columns}
+          />
+        </div>,
       );
     }).not.toErrorDev();
   });

From aa46d51d0066ea5dddaf8b904d72b6e22f0d45f6 Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Mon, 8 Jul 2024 20:51:14 -0400
Subject: [PATCH 11/13] lint

---
 .../x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx
index de93d15a5e6e1..5561eb1afc5e5 100644
--- a/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx
@@ -108,7 +108,7 @@ describe('<DataGridPro /> - Pagination', () => {
       render(
         <div style={{ width: 300, height: 300 }}>
           <DataGridPro rows={[]} columns={[]} paginationMode="client" rowCount={100} />
-        </div>
+        </div>,
       );
     }).toErrorDev([
       'MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect. `rowCount` is only meant to be used with `paginationMode="server"`.',

From 20080f735df582426653042890b6f6fe976fba90 Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Mon, 8 Jul 2024 21:01:33 -0400
Subject: [PATCH 12/13] test: fix

---
 packages/x-data-grid/src/tests/layout.DataGrid.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx
index 28a32fe53aa08..4f003a3548662 100644
--- a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx
@@ -1174,7 +1174,7 @@ describe('<DataGrid /> - Layout & warnings', () => {
     }
 
     render(
-      <div style={{ height: '100%', width: 400.6 }}>
+      <div style={{ height: 300, width: 400.6 }}>
         <DataGrid rows={[{ id: 1 }]} columns={[{ field: 'id', flex: 1 }]} />
       </div>,
     );
@@ -1213,7 +1213,7 @@ describe('<DataGrid /> - Layout & warnings', () => {
     }
 
     render(
-      <div style={{ height: 'auto', width: 1584 }}>
+      <div style={{ height: 300, width: 1584 }}>
         <DataGrid
           rows={[{ id: 1 }]}
           columns={[

From e1a1337ecb8ebc43db003d77f192e243080a1788 Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk.cc@gmail.com>
Date: Mon, 8 Jul 2024 21:03:01 -0400
Subject: [PATCH 13/13] ci: run