From 3baff5b26f4ecdff775ac79bf099991e62a0680c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 26 Mar 2024 13:22:46 +0100
Subject: [PATCH] Bump @mui/x-data-grid from 6.19.8 to 7.0.0 (#2732)

* Bump @mui/x-data-grid from 6.19.8 to 7.0.0

Bumps [@mui/x-data-grid](https://github.com/mui/mui-x/tree/HEAD/packages/x-data-grid) from 6.19.8 to 7.0.0.
- [Release notes](https://github.com/mui/mui-x/releases)
- [Changelog](https://github.com/mui/mui-x/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mui/mui-x/commits/v7.0.0/packages/x-data-grid)

---
updated-dependencies:
- dependency-name: "@mui/x-data-grid"
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* update-snapshots

* Breaking change

* Fix missing quote

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Martijn Verburg <martijnverburg@gmail.com>
Co-authored-by: Xavier FACQ <xavier.facq@free.fr>
---
 package-lock.json                             |  20 +-
 package.json                                  |   2 +-
 .../ReleaseNotesRender.test.tsx.snap          | 790 +++++++++---------
 src/components/ReleaseNotesRender/index.tsx   |   4 +-
 .../__snapshots__/release-notes.test.tsx.snap | 735 ++++++++--------
 5 files changed, 798 insertions(+), 753 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 91c84159c..cf9e7831a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "@mdx-js/react": "^2.3.0",
         "@mui/lab": "^5.0.0-alpha.97",
         "@mui/material": "^5.15.14",
-        "@mui/x-data-grid": "^6.19.8",
+        "@mui/x-data-grid": "^7.0.0",
         "@mui/x-date-pickers": "^7.0.0",
         "@popperjs/core": "^2.11.8",
         "@react-icons/all-files": "^4.1.0",
@@ -3887,13 +3887,14 @@
       }
     },
     "node_modules/@mui/x-data-grid": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.19.8.tgz",
-      "integrity": "sha512-QsOW9GhJdhvagJfUb5jpZE1MMaCLugxx0l89amxJAthMia95BlGS7jndiDEh8IQNthgzfxjAzrSv8GZpcgSEaA==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.0.0.tgz",
+      "integrity": "sha512-Nwwfr+ot/di0oH/pVwIxKV2QD7QyUY/MKkTWRSKzQoJw2aiFQf1Usmvq9Fu1qsCsvMmqIFaToY7972p0cczRjw==",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
-        "@mui/utils": "^5.14.16",
-        "clsx": "^2.0.0",
+        "@babel/runtime": "^7.24.0",
+        "@mui/system": "^5.15.14",
+        "@mui/utils": "^5.15.14",
+        "clsx": "^2.1.0",
         "prop-types": "^15.8.1",
         "reselect": "^4.1.8"
       },
@@ -3902,11 +3903,10 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@mui/material": "^5.4.1",
-        "@mui/system": "^5.4.1",
+        "@mui/material": "^5.15.14",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0"
       }
diff --git a/package.json b/package.json
index aaf94ab3f..2ddc53a5f 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "@mdx-js/react": "^2.3.0",
     "@mui/lab": "^5.0.0-alpha.97",
     "@mui/material": "^5.15.14",
-    "@mui/x-data-grid": "^6.19.8",
+    "@mui/x-data-grid": "^7.0.0",
     "@mui/x-date-pickers": "^7.0.0",
     "@popperjs/core": "^2.11.8",
     "@react-icons/all-files": "^4.1.0",
diff --git a/src/components/ReleaseNotesRender/__tests__/__snapshots__/ReleaseNotesRender.test.tsx.snap b/src/components/ReleaseNotesRender/__tests__/__snapshots__/ReleaseNotesRender.test.tsx.snap
index bddad0e7a..9d582b24e 100644
--- a/src/components/ReleaseNotesRender/__tests__/__snapshots__/ReleaseNotesRender.test.tsx.snap
+++ b/src/components/ReleaseNotesRender/__tests__/__snapshots__/ReleaseNotesRender.test.tsx.snap
@@ -82,13 +82,15 @@ exports[`ReleaseNotesRender component > should render correctly 1`] = `
           </strong>
         </p>
         <div
-          aria-colcount="5"
           aria-label="Release Notes"
-          aria-multiselectable="false"
-          aria-rowcount="3"
-          class="MuiDataGrid-root MuiDataGrid-autoHeight MuiDataGrid-root--densityStandard MuiDataGrid-withBorderColor css-u4hl04-MuiDataGrid-root"
-          role="grid"
+          class="MuiDataGrid-root MuiDataGrid-autoHeight MuiDataGrid-root--densityStandard MuiDataGrid-withBorderColor css-jt255j-MuiDataGrid-root"
+          style="--DataGrid-width: 0px; --DataGrid-hasScrollX: 1; --DataGrid-hasScrollY: 0; --DataGrid-scrollbarSize: 0px; --DataGrid-rowWidth: 1300px; --DataGrid-columnsTotalWidth: 1300px; --DataGrid-leftPinnedWidth: 0px; --DataGrid-rightPinnedWidth: 0px; --DataGrid-headerHeight: 56px; --DataGrid-headersTotalHeight: 56px; --DataGrid-topContainerHeight: 56px; --DataGrid-bottomContainerHeight: 0px; --height: 52px;"
         >
+          <div
+            class="css-qtdhae"
+            data-id="gridPanelAnchor"
+            role="presentation"
+          />
           <div
             class="MuiDataGrid-toolbarContainer css-128fb87-MuiDataGrid-toolbarContainer"
           >
@@ -133,72 +135,115 @@ exports[`ReleaseNotesRender component > should render correctly 1`] = `
             </button>
           </div>
           <div
-            class="MuiDataGrid-main css-204u17-MuiDataGrid-main"
+            aria-colcount="5"
+            aria-multiselectable="false"
+            aria-rowcount="3"
+            class="MuiDataGrid-main css-jdaxyo"
+            role="grid"
+            tabindex="-1"
           >
             <div
-              class="MuiDataGrid-columnHeaders MuiDataGrid-withBorderColor css-1iyq7zh-MuiDataGrid-columnHeaders"
+              class="MuiDataGrid-virtualScroller css-1793420-MuiDataGrid-virtualScroller"
               role="presentation"
-              style="min-height: 56px; max-height: 56px; line-height: 56px;"
+              style="overflow-x: hidden; overflow-y: hidden;"
+              tabindex="-1"
             >
               <div
-                class="MuiDataGrid-columnHeadersInner MuiDataGrid-columnHeadersInner--scrollable css-gl260s-MuiDataGrid-columnHeadersInner"
-                role="rowgroup"
-                style="transform: translate3d(0px, 0px, 0px);"
+                class="MuiDataGrid-topContainer MuiDataGrid-container--top css-jmgi9p"
+                role="presentation"
               >
                 <div
-                  aria-rowindex="1"
-                  class="css-yrdy0g-MuiDataGrid-columnHeaderRow"
-                  role="row"
+                  class="MuiDataGrid-columnHeaders css-1pmk00y-MuiDataGrid-columnHeaders"
+                  role="presentation"
                 >
                   <div
-                    aria-colindex="1"
-                    aria-label="Priority"
-                    aria-sort="ascending"
-                    class="MuiDataGrid-columnHeader MuiDataGrid-columnHeader--sortable MuiDataGrid-columnHeader--sorted MuiDataGrid-withBorderColor"
-                    data-field="priority"
-                    role="columnheader"
-                    style="height: 56px; width: 100px; min-width: 100px; max-width: 100px;"
-                    tabindex="0"
+                    aria-rowindex="1"
+                    class="css-1essi2g-MuiDataGrid-columnHeaderRow"
+                    role="row"
                   >
                     <div
-                      class="MuiDataGrid-columnHeaderDraggableContainer"
-                      draggable="false"
                       role="presentation"
+                      style="width: 0px;"
+                    />
+                    <div
+                      aria-colindex="1"
+                      aria-label="Priority"
+                      aria-sort="ascending"
+                      class="MuiDataGrid-columnHeader MuiDataGrid-columnHeader--sortable MuiDataGrid-columnHeader--sorted MuiDataGrid-withBorderColor"
+                      data-field="priority"
+                      role="columnheader"
+                      style="height: 56px; width: 100px; min-width: 100px; max-width: 100px;"
+                      tabindex="0"
                     >
                       <div
-                        class="MuiDataGrid-columnHeaderTitleContainer"
+                        class="MuiDataGrid-columnHeaderDraggableContainer"
+                        draggable="false"
                         role="presentation"
                       >
                         <div
-                          class="MuiDataGrid-columnHeaderTitleContainerContent"
+                          class="MuiDataGrid-columnHeaderTitleContainer"
+                          role="presentation"
                         >
                           <div
-                            aria-label=""
-                            class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
-                            data-mui-internal-clone-element="true"
+                            class="MuiDataGrid-columnHeaderTitleContainerContent"
+                          >
+                            <div
+                              aria-label=""
+                              class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
+                              data-mui-internal-clone-element="true"
+                            >
+                              Priority
+                            </div>
+                          </div>
+                          <div
+                            class="MuiDataGrid-iconButtonContainer css-ltf0zy-MuiDataGrid-iconButtonContainer"
                           >
-                            Priority
+                            <button
+                              aria-label="Sort"
+                              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                              tabindex="-1"
+                              title="Sort"
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall MuiDataGrid-sortIcon css-ptiqhd-MuiSvgIcon-root"
+                                data-testid="ArrowUpwardIcon"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
+                                />
+                              </svg>
+                              <span
+                                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                              />
+                            </button>
                           </div>
                         </div>
                         <div
-                          class="MuiDataGrid-iconButtonContainer css-ltf0zy-MuiDataGrid-iconButtonContainer"
+                          class="MuiDataGrid-menuIcon"
                         >
                           <button
-                            aria-label="Sort"
-                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                            aria-expanded="false"
+                            aria-haspopup="menu"
+                            aria-label="Menu"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                            data-mui-internal-clone-element="true"
+                            id=":r7:"
                             tabindex="-1"
-                            title="Sort"
                             type="button"
                           >
                             <svg
                               aria-hidden="true"
-                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall MuiDataGrid-sortIcon css-ptiqhd-MuiSvgIcon-root"
-                              data-testid="ArrowUpwardIcon"
+                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                              data-testid="TripleDotsVerticalIcon"
                               focusable="false"
                               viewBox="0 0 24 24"
                             >
                               <path
-                                d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
+                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                               />
                             </svg>
                             <span
@@ -208,399 +253,377 @@ exports[`ReleaseNotesRender component > should render correctly 1`] = `
                         </div>
                       </div>
                       <div
-                        class="MuiDataGrid-menuIcon"
+                        class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--resizable MuiDataGrid-columnSeparator--sideRight"
+                        style="min-height: 56px; opacity: 1;"
                       >
-                        <button
-                          aria-expanded="false"
-                          aria-haspopup="menu"
-                          aria-label="Menu"
-                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
-                          data-mui-internal-clone-element="true"
-                          id=":r7:"
-                          tabindex="-1"
-                          type="button"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
+                          data-testid="SeparatorIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
-                            data-testid="TripleDotsVerticalIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                            />
-                          </svg>
-                          <span
-                            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                          <path
+                            d="M11 19V5h2v14z"
                           />
-                        </button>
+                        </svg>
                       </div>
                     </div>
                     <div
-                      class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--sideRight"
-                      style="min-height: 56px; opacity: 1;"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
-                        data-testid="SeparatorIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M11 19V5h2v14z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                  <div
-                    aria-colindex="2"
-                    aria-label="Type"
-                    aria-sort="none"
-                    class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
-                    data-field="type"
-                    role="columnheader"
-                    style="height: 56px; width: 100px; min-width: 100px; max-width: 100px;"
-                    tabindex="-1"
-                  >
-                    <div
-                      class="MuiDataGrid-columnHeaderDraggableContainer"
-                      draggable="false"
-                      role="presentation"
+                      aria-colindex="2"
+                      aria-label="Type"
+                      aria-sort="none"
+                      class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
+                      data-field="type"
+                      role="columnheader"
+                      style="height: 56px; width: 100px; min-width: 100px; max-width: 100px;"
+                      tabindex="-1"
                     >
                       <div
-                        class="MuiDataGrid-columnHeaderTitleContainer"
+                        class="MuiDataGrid-columnHeaderDraggableContainer"
+                        draggable="false"
                         role="presentation"
                       >
                         <div
-                          class="MuiDataGrid-columnHeaderTitleContainerContent"
+                          class="MuiDataGrid-columnHeaderTitleContainer"
+                          role="presentation"
                         >
                           <div
-                            aria-label=""
-                            class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
-                            data-mui-internal-clone-element="true"
+                            class="MuiDataGrid-columnHeaderTitleContainerContent"
                           >
-                            Type
+                            <div
+                              aria-label=""
+                              class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
+                              data-mui-internal-clone-element="true"
+                            >
+                              Type
+                            </div>
                           </div>
                         </div>
+                        <div
+                          class="MuiDataGrid-menuIcon"
+                        >
+                          <button
+                            aria-expanded="false"
+                            aria-haspopup="menu"
+                            aria-label="Menu"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                            data-mui-internal-clone-element="true"
+                            id=":rd:"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                              data-testid="TripleDotsVerticalIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                              />
+                            </svg>
+                            <span
+                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            />
+                          </button>
+                        </div>
                       </div>
                       <div
-                        class="MuiDataGrid-menuIcon"
+                        class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--resizable MuiDataGrid-columnSeparator--sideRight"
+                        style="min-height: 56px; opacity: 1;"
                       >
-                        <button
-                          aria-expanded="false"
-                          aria-haspopup="menu"
-                          aria-label="Menu"
-                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
-                          data-mui-internal-clone-element="true"
-                          id=":rd:"
-                          tabindex="-1"
-                          type="button"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
+                          data-testid="SeparatorIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
-                            data-testid="TripleDotsVerticalIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                            />
-                          </svg>
-                          <span
-                            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                          <path
+                            d="M11 19V5h2v14z"
                           />
-                        </button>
+                        </svg>
                       </div>
                     </div>
                     <div
-                      class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--sideRight"
-                      style="min-height: 56px; opacity: 1;"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
-                        data-testid="SeparatorIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M11 19V5h2v14z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                  <div
-                    aria-colindex="3"
-                    aria-label="Component"
-                    aria-sort="none"
-                    class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
-                    data-field="component"
-                    role="columnheader"
-                    style="height: 56px; width: 150px; min-width: 150px; max-width: 150px;"
-                    tabindex="-1"
-                  >
-                    <div
-                      class="MuiDataGrid-columnHeaderDraggableContainer"
-                      draggable="false"
-                      role="presentation"
+                      aria-colindex="3"
+                      aria-label="Component"
+                      aria-sort="none"
+                      class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
+                      data-field="component"
+                      role="columnheader"
+                      style="height: 56px; width: 150px; min-width: 150px; max-width: 150px;"
+                      tabindex="-1"
                     >
                       <div
-                        class="MuiDataGrid-columnHeaderTitleContainer"
+                        class="MuiDataGrid-columnHeaderDraggableContainer"
+                        draggable="false"
                         role="presentation"
                       >
                         <div
-                          class="MuiDataGrid-columnHeaderTitleContainerContent"
+                          class="MuiDataGrid-columnHeaderTitleContainer"
+                          role="presentation"
                         >
                           <div
-                            aria-label=""
-                            class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
-                            data-mui-internal-clone-element="true"
+                            class="MuiDataGrid-columnHeaderTitleContainerContent"
                           >
-                            Component
+                            <div
+                              aria-label=""
+                              class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
+                              data-mui-internal-clone-element="true"
+                            >
+                              Component
+                            </div>
                           </div>
                         </div>
+                        <div
+                          class="MuiDataGrid-menuIcon"
+                        >
+                          <button
+                            aria-expanded="false"
+                            aria-haspopup="menu"
+                            aria-label="Menu"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                            data-mui-internal-clone-element="true"
+                            id=":rj:"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                              data-testid="TripleDotsVerticalIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                              />
+                            </svg>
+                            <span
+                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            />
+                          </button>
+                        </div>
                       </div>
                       <div
-                        class="MuiDataGrid-menuIcon"
+                        class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--resizable MuiDataGrid-columnSeparator--sideRight"
+                        style="min-height: 56px; opacity: 1;"
                       >
-                        <button
-                          aria-expanded="false"
-                          aria-haspopup="menu"
-                          aria-label="Menu"
-                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
-                          data-mui-internal-clone-element="true"
-                          id=":rj:"
-                          tabindex="-1"
-                          type="button"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
+                          data-testid="SeparatorIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
-                            data-testid="TripleDotsVerticalIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                            />
-                          </svg>
-                          <span
-                            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                          <path
+                            d="M11 19V5h2v14z"
                           />
-                        </button>
+                        </svg>
                       </div>
                     </div>
                     <div
-                      class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--sideRight"
-                      style="min-height: 56px; opacity: 1;"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
-                        data-testid="SeparatorIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M11 19V5h2v14z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                  <div
-                    aria-colindex="4"
-                    aria-label="Issue"
-                    aria-sort="none"
-                    class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
-                    data-field="id"
-                    role="columnheader"
-                    style="height: 56px; width: 150px; min-width: 150px; max-width: 150px;"
-                    tabindex="-1"
-                  >
-                    <div
-                      class="MuiDataGrid-columnHeaderDraggableContainer"
-                      draggable="false"
-                      role="presentation"
+                      aria-colindex="4"
+                      aria-label="Issue"
+                      aria-sort="none"
+                      class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
+                      data-field="id"
+                      role="columnheader"
+                      style="height: 56px; width: 150px; min-width: 150px; max-width: 150px;"
+                      tabindex="-1"
                     >
                       <div
-                        class="MuiDataGrid-columnHeaderTitleContainer"
+                        class="MuiDataGrid-columnHeaderDraggableContainer"
+                        draggable="false"
                         role="presentation"
                       >
                         <div
-                          class="MuiDataGrid-columnHeaderTitleContainerContent"
+                          class="MuiDataGrid-columnHeaderTitleContainer"
+                          role="presentation"
                         >
                           <div
-                            aria-label=""
-                            class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
-                            data-mui-internal-clone-element="true"
+                            class="MuiDataGrid-columnHeaderTitleContainerContent"
                           >
-                            Issue
+                            <div
+                              aria-label=""
+                              class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
+                              data-mui-internal-clone-element="true"
+                            >
+                              Issue
+                            </div>
                           </div>
                         </div>
+                        <div
+                          class="MuiDataGrid-menuIcon"
+                        >
+                          <button
+                            aria-expanded="false"
+                            aria-haspopup="menu"
+                            aria-label="Menu"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                            data-mui-internal-clone-element="true"
+                            id=":rp:"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                              data-testid="TripleDotsVerticalIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                              />
+                            </svg>
+                            <span
+                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            />
+                          </button>
+                        </div>
                       </div>
                       <div
-                        class="MuiDataGrid-menuIcon"
+                        class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--resizable MuiDataGrid-columnSeparator--sideRight"
+                        style="min-height: 56px; opacity: 1;"
                       >
-                        <button
-                          aria-expanded="false"
-                          aria-haspopup="menu"
-                          aria-label="Menu"
-                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
-                          data-mui-internal-clone-element="true"
-                          id=":rp:"
-                          tabindex="-1"
-                          type="button"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
+                          data-testid="SeparatorIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
-                            data-testid="TripleDotsVerticalIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                            />
-                          </svg>
-                          <span
-                            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                          <path
+                            d="M11 19V5h2v14z"
                           />
-                        </button>
+                        </svg>
                       </div>
                     </div>
                     <div
-                      class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--sideRight"
-                      style="min-height: 56px; opacity: 1;"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
-                        data-testid="SeparatorIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M11 19V5h2v14z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                  <div
-                    aria-colindex="5"
-                    aria-label="Title"
-                    aria-sort="none"
-                    class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
-                    data-field="title"
-                    role="columnheader"
-                    style="height: 56px; width: 800px; min-width: 800px; max-width: 800px;"
-                    tabindex="-1"
-                  >
-                    <div
-                      class="MuiDataGrid-columnHeaderDraggableContainer"
-                      draggable="false"
-                      role="presentation"
+                      aria-colindex="5"
+                      aria-label="Title"
+                      aria-sort="none"
+                      class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
+                      data-field="title"
+                      role="columnheader"
+                      style="height: 56px; width: 800px; min-width: 800px; max-width: 800px;"
+                      tabindex="-1"
                     >
                       <div
-                        class="MuiDataGrid-columnHeaderTitleContainer"
+                        class="MuiDataGrid-columnHeaderDraggableContainer"
+                        draggable="false"
                         role="presentation"
                       >
                         <div
-                          class="MuiDataGrid-columnHeaderTitleContainerContent"
+                          class="MuiDataGrid-columnHeaderTitleContainer"
+                          role="presentation"
                         >
                           <div
-                            aria-label=""
-                            class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
-                            data-mui-internal-clone-element="true"
+                            class="MuiDataGrid-columnHeaderTitleContainerContent"
                           >
-                            Title
+                            <div
+                              aria-label=""
+                              class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
+                              data-mui-internal-clone-element="true"
+                            >
+                              Title
+                            </div>
                           </div>
                         </div>
+                        <div
+                          class="MuiDataGrid-menuIcon"
+                        >
+                          <button
+                            aria-expanded="false"
+                            aria-haspopup="menu"
+                            aria-label="Menu"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                            data-mui-internal-clone-element="true"
+                            id=":rv:"
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                              data-testid="TripleDotsVerticalIcon"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                              />
+                            </svg>
+                            <span
+                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            />
+                          </button>
+                        </div>
                       </div>
                       <div
-                        class="MuiDataGrid-menuIcon"
+                        class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--resizable MuiDataGrid-columnSeparator--sideRight"
+                        style="min-height: 56px; opacity: 1;"
                       >
-                        <button
-                          aria-expanded="false"
-                          aria-haspopup="menu"
-                          aria-label="Menu"
-                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
-                          data-mui-internal-clone-element="true"
-                          id=":rv:"
-                          tabindex="-1"
-                          type="button"
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
+                          data-testid="SeparatorIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
-                            data-testid="TripleDotsVerticalIcon"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                            />
-                          </svg>
-                          <span
-                            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                          <path
+                            d="M11 19V5h2v14z"
                           />
-                        </button>
+                        </svg>
                       </div>
                     </div>
                     <div
-                      class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--sideRight"
-                      style="min-height: 56px; opacity: 1;"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
-                        data-testid="SeparatorIcon"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M11 19V5h2v14z"
-                        />
-                      </svg>
-                    </div>
+                      class="MuiDataGrid-filler"
+                      role="presentation"
+                    />
+                    <div
+                      class="MuiDataGrid-scrollbarFiller MuiDataGrid-scrollbarFiller--header"
+                      role="presentation"
+                    />
                   </div>
                 </div>
               </div>
-            </div>
-            <div
-              class="MuiDataGrid-virtualScroller css-qvtrhg-MuiDataGrid-virtualScroller"
-              role="presentation"
-              style="overflow-x: hidden; overflow-y: hidden;"
-            >
               <div
                 class="MuiDataGrid-virtualScrollerContent css-1kwdphh-MuiDataGrid-virtualScrollerContent"
                 role="presentation"
-                style="width: auto; height: 104px; min-height: auto;"
+                style="width: auto; height: 0px;"
               >
                 <div
                   class="MuiDataGrid-virtualScrollerRenderZone css-s1v7zr-MuiDataGrid-virtualScrollerRenderZone"
                   role="rowgroup"
-                  style="transform: translate3d(0px, 0px, 0px);"
+                  style="transform: translate3d(0, 0px, 0);"
                 >
                   <div
                     aria-rowindex="2"
                     aria-selected="false"
-                    class="MuiDataGrid-row MuiDataGrid-row--dynamicHeight"
+                    class="MuiDataGrid-row MuiDataGrid-row--firstVisible MuiDataGrid-row--dynamicHeight"
                     data-id="0"
                     data-rowindex="0"
                     role="row"
-                    style="max-height: none; min-height: auto;"
+                    style="max-height: none; min-height: auto; --height: auto;"
                   >
+                    <div
+                      class="MuiDataGrid-cellOffsetLeft"
+                      role="presentation"
+                      style="width: 0px;"
+                    />
                     <div
                       aria-colindex="1"
                       aria-colspan="1"
-                      class="MuiDataGrid-cell--withRenderer MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                       data-colindex="0"
                       data-field="priority"
-                      role="cell"
-                      style="min-width: 100px; max-width: 100px; min-height: auto; max-height: none;"
+                      role="gridcell"
+                      style="--width: 100px;"
                       tabindex="-1"
                     >
                       <span
@@ -613,11 +636,11 @@ exports[`ReleaseNotesRender component > should render correctly 1`] = `
                     <div
                       aria-colindex="2"
                       aria-colspan="1"
-                      class="MuiDataGrid-cell--withRenderer MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                       data-colindex="1"
                       data-field="type"
-                      role="cell"
-                      style="min-width: 100px; max-width: 100px; min-height: auto; max-height: none;"
+                      role="gridcell"
+                      style="--width: 100px;"
                       tabindex="-1"
                     >
                       <span>
@@ -627,29 +650,24 @@ exports[`ReleaseNotesRender component > should render correctly 1`] = `
                     <div
                       aria-colindex="3"
                       aria-colspan="1"
-                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                       data-colindex="2"
                       data-field="component"
-                      role="cell"
-                      style="min-width: 150px; max-width: 150px; min-height: auto; max-height: none;"
+                      role="gridcell"
+                      style="--width: 150px;"
                       tabindex="-1"
+                      title="component_mock"
                     >
-                      <div
-                        class="MuiDataGrid-cellContent"
-                        role="presentation"
-                        title="component_mock"
-                      >
-                        component_mock
-                      </div>
+                      component_mock
                     </div>
                     <div
                       aria-colindex="4"
                       aria-colspan="1"
-                      class="MuiDataGrid-cell--withRenderer MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                       data-colindex="3"
                       data-field="id"
-                      role="cell"
-                      style="min-width: 150px; max-width: 150px; min-height: auto; max-height: none;"
+                      role="gridcell"
+                      style="--width: 150px;"
                       tabindex="-1"
                     >
                       <a
@@ -663,20 +681,15 @@ exports[`ReleaseNotesRender component > should render correctly 1`] = `
                     <div
                       aria-colindex="5"
                       aria-colspan="1"
-                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                       data-colindex="4"
                       data-field="title"
-                      role="cell"
-                      style="min-width: 800px; max-width: 800px; min-height: auto; max-height: none;"
+                      role="gridcell"
+                      style="--width: 800px;"
                       tabindex="-1"
+                      title="title_mock"
                     >
-                      <div
-                        class="MuiDataGrid-cellContent"
-                        role="presentation"
-                        title="title_mock"
-                      >
-                        title_mock
-                      </div>
+                      title_mock
                     </div>
                   </div>
                   <div
@@ -686,16 +699,21 @@ exports[`ReleaseNotesRender component > should render correctly 1`] = `
                     data-id="1"
                     data-rowindex="1"
                     role="row"
-                    style="max-height: none; min-height: auto;"
+                    style="max-height: none; min-height: auto; --height: auto;"
                   >
+                    <div
+                      class="MuiDataGrid-cellOffsetLeft"
+                      role="presentation"
+                      style="width: 0px;"
+                    />
                     <div
                       aria-colindex="1"
                       aria-colspan="1"
-                      class="MuiDataGrid-cell--withRenderer MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                       data-colindex="0"
                       data-field="priority"
-                      role="cell"
-                      style="min-width: 100px; max-width: 100px; min-height: auto; max-height: none;"
+                      role="gridcell"
+                      style="--width: 100px;"
                       tabindex="-1"
                     >
                       <span
@@ -708,11 +726,11 @@ exports[`ReleaseNotesRender component > should render correctly 1`] = `
                     <div
                       aria-colindex="2"
                       aria-colspan="1"
-                      class="MuiDataGrid-cell--withRenderer MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                       data-colindex="1"
                       data-field="type"
-                      role="cell"
-                      style="min-width: 100px; max-width: 100px; min-height: auto; max-height: none;"
+                      role="gridcell"
+                      style="--width: 100px;"
                       tabindex="-1"
                     >
                       <span>
@@ -722,29 +740,24 @@ exports[`ReleaseNotesRender component > should render correctly 1`] = `
                     <div
                       aria-colindex="3"
                       aria-colspan="1"
-                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                       data-colindex="2"
                       data-field="component"
-                      role="cell"
-                      style="min-width: 150px; max-width: 150px; min-height: auto; max-height: none;"
+                      role="gridcell"
+                      style="--width: 150px;"
                       tabindex="-1"
+                      title="component_mock"
                     >
-                      <div
-                        class="MuiDataGrid-cellContent"
-                        role="presentation"
-                        title="component_mock"
-                      >
-                        component_mock
-                      </div>
+                      component_mock
                     </div>
                     <div
                       aria-colindex="4"
                       aria-colspan="1"
-                      class="MuiDataGrid-cell--withRenderer MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                       data-colindex="3"
                       data-field="id"
-                      role="cell"
-                      style="min-width: 150px; max-width: 150px; min-height: auto; max-height: none;"
+                      role="gridcell"
+                      style="--width: 150px;"
                       tabindex="-1"
                     >
                       <a
@@ -758,24 +771,31 @@ exports[`ReleaseNotesRender component > should render correctly 1`] = `
                     <div
                       aria-colindex="5"
                       aria-colspan="1"
-                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                      class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                       data-colindex="4"
                       data-field="title"
-                      role="cell"
-                      style="min-width: 800px; max-width: 800px; min-height: auto; max-height: none;"
+                      role="gridcell"
+                      style="--width: 800px;"
                       tabindex="-1"
+                      title="title_mock"
                     >
-                      <div
-                        class="MuiDataGrid-cellContent"
-                        role="presentation"
-                        title="title_mock"
-                      >
-                        title_mock
-                      </div>
+                      title_mock
                     </div>
                   </div>
                 </div>
               </div>
+              <div
+                class="MuiDataGrid-bottomContainer MuiDataGrid-container--bottom css-14egwce"
+                role="presentation"
+              />
+            </div>
+            <div
+              class="MuiDataGrid-scrollbar MuiDataGrid-scrollbar--horizontal css-1rtad1"
+              tabindex="-1"
+            >
+              <div
+                class="MuiDataGrid-scrollbarContent css-1baulvz"
+              />
             </div>
           </div>
           <div
diff --git a/src/components/ReleaseNotesRender/index.tsx b/src/components/ReleaseNotesRender/index.tsx
index 78d5b4110..40f8bce54 100644
--- a/src/components/ReleaseNotesRender/index.tsx
+++ b/src/components/ReleaseNotesRender/index.tsx
@@ -197,8 +197,8 @@ const ReleaseNotesRender = (): null | JSX.Element => {
                 pageSizeOptions={[20, 50, 75]}
                 pagination
                 isRowSelectable={() => false}
-                components={{
-                  Toolbar: CustomToolbar,
+                slots={{
+                  toolbar: CustomToolbar,
                 }}
                 getRowHeight={() => 'auto'}
                 sx={{
diff --git a/src/pages/temurin/__tests__/__snapshots__/release-notes.test.tsx.snap b/src/pages/temurin/__tests__/__snapshots__/release-notes.test.tsx.snap
index d295fce92..8bac627c9 100644
--- a/src/pages/temurin/__tests__/__snapshots__/release-notes.test.tsx.snap
+++ b/src/pages/temurin/__tests__/__snapshots__/release-notes.test.tsx.snap
@@ -32,13 +32,15 @@ exports[`Temurin Release Notes page > renders correctly 1`] = `
             </strong>
           </p>
           <div
-            aria-colcount="5"
             aria-label="Release Notes"
-            aria-multiselectable="false"
-            aria-rowcount="2"
-            class="MuiDataGrid-root MuiDataGrid-autoHeight MuiDataGrid-root--densityStandard MuiDataGrid-withBorderColor css-u4hl04-MuiDataGrid-root"
-            role="grid"
+            class="MuiDataGrid-root MuiDataGrid-autoHeight MuiDataGrid-root--densityStandard MuiDataGrid-withBorderColor css-jt255j-MuiDataGrid-root"
+            style="--DataGrid-width: 0px; --DataGrid-hasScrollX: 1; --DataGrid-hasScrollY: 0; --DataGrid-scrollbarSize: 0px; --DataGrid-rowWidth: 1300px; --DataGrid-columnsTotalWidth: 1300px; --DataGrid-leftPinnedWidth: 0px; --DataGrid-rightPinnedWidth: 0px; --DataGrid-headerHeight: 56px; --DataGrid-headersTotalHeight: 56px; --DataGrid-topContainerHeight: 56px; --DataGrid-bottomContainerHeight: 0px; --height: 52px;"
           >
+            <div
+              class="css-qtdhae"
+              data-id="gridPanelAnchor"
+              role="presentation"
+            />
             <div
               class="MuiDataGrid-toolbarContainer css-128fb87-MuiDataGrid-toolbarContainer"
             >
@@ -83,72 +85,115 @@ exports[`Temurin Release Notes page > renders correctly 1`] = `
               </button>
             </div>
             <div
-              class="MuiDataGrid-main css-204u17-MuiDataGrid-main"
+              aria-colcount="5"
+              aria-multiselectable="false"
+              aria-rowcount="2"
+              class="MuiDataGrid-main css-jdaxyo"
+              role="grid"
+              tabindex="-1"
             >
               <div
-                class="MuiDataGrid-columnHeaders MuiDataGrid-withBorderColor css-1iyq7zh-MuiDataGrid-columnHeaders"
+                class="MuiDataGrid-virtualScroller css-1793420-MuiDataGrid-virtualScroller"
                 role="presentation"
-                style="min-height: 56px; max-height: 56px; line-height: 56px;"
+                style="overflow-x: hidden; overflow-y: hidden;"
+                tabindex="-1"
               >
                 <div
-                  class="MuiDataGrid-columnHeadersInner MuiDataGrid-columnHeadersInner--scrollable css-gl260s-MuiDataGrid-columnHeadersInner"
-                  role="rowgroup"
-                  style="transform: translate3d(0px, 0px, 0px);"
+                  class="MuiDataGrid-topContainer MuiDataGrid-container--top css-jmgi9p"
+                  role="presentation"
                 >
                   <div
-                    aria-rowindex="1"
-                    class="css-yrdy0g-MuiDataGrid-columnHeaderRow"
-                    role="row"
+                    class="MuiDataGrid-columnHeaders css-1pmk00y-MuiDataGrid-columnHeaders"
+                    role="presentation"
                   >
                     <div
-                      aria-colindex="1"
-                      aria-label="Priority"
-                      aria-sort="ascending"
-                      class="MuiDataGrid-columnHeader MuiDataGrid-columnHeader--sortable MuiDataGrid-columnHeader--sorted MuiDataGrid-withBorderColor"
-                      data-field="priority"
-                      role="columnheader"
-                      style="height: 56px; width: 100px; min-width: 100px; max-width: 100px;"
-                      tabindex="0"
+                      aria-rowindex="1"
+                      class="css-1essi2g-MuiDataGrid-columnHeaderRow"
+                      role="row"
                     >
                       <div
-                        class="MuiDataGrid-columnHeaderDraggableContainer"
-                        draggable="false"
                         role="presentation"
+                        style="width: 0px;"
+                      />
+                      <div
+                        aria-colindex="1"
+                        aria-label="Priority"
+                        aria-sort="ascending"
+                        class="MuiDataGrid-columnHeader MuiDataGrid-columnHeader--sortable MuiDataGrid-columnHeader--sorted MuiDataGrid-withBorderColor"
+                        data-field="priority"
+                        role="columnheader"
+                        style="height: 56px; width: 100px; min-width: 100px; max-width: 100px;"
+                        tabindex="0"
                       >
                         <div
-                          class="MuiDataGrid-columnHeaderTitleContainer"
+                          class="MuiDataGrid-columnHeaderDraggableContainer"
+                          draggable="false"
                           role="presentation"
                         >
                           <div
-                            class="MuiDataGrid-columnHeaderTitleContainerContent"
+                            class="MuiDataGrid-columnHeaderTitleContainer"
+                            role="presentation"
                           >
                             <div
-                              aria-label=""
-                              class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
-                              data-mui-internal-clone-element="true"
+                              class="MuiDataGrid-columnHeaderTitleContainerContent"
                             >
-                              Priority
+                              <div
+                                aria-label=""
+                                class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
+                                data-mui-internal-clone-element="true"
+                              >
+                                Priority
+                              </div>
+                            </div>
+                            <div
+                              class="MuiDataGrid-iconButtonContainer css-ltf0zy-MuiDataGrid-iconButtonContainer"
+                            >
+                              <button
+                                aria-label="Sort"
+                                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                                tabindex="-1"
+                                title="Sort"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall MuiDataGrid-sortIcon css-ptiqhd-MuiSvgIcon-root"
+                                  data-testid="ArrowUpwardIcon"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
+                                  />
+                                </svg>
+                                <span
+                                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                                />
+                              </button>
                             </div>
                           </div>
                           <div
-                            class="MuiDataGrid-iconButtonContainer css-ltf0zy-MuiDataGrid-iconButtonContainer"
+                            class="MuiDataGrid-menuIcon"
                           >
                             <button
-                              aria-label="Sort"
-                              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                              aria-expanded="false"
+                              aria-haspopup="menu"
+                              aria-label="Menu"
+                              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                              data-mui-internal-clone-element="true"
+                              id=":r7:"
                               tabindex="-1"
-                              title="Sort"
                               type="button"
                             >
                               <svg
                                 aria-hidden="true"
-                                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall MuiDataGrid-sortIcon css-ptiqhd-MuiSvgIcon-root"
-                                data-testid="ArrowUpwardIcon"
+                                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                                data-testid="TripleDotsVerticalIcon"
                                 focusable="false"
                                 viewBox="0 0 24 24"
                               >
                                 <path
-                                  d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
+                                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                                 />
                               </svg>
                               <span
@@ -158,399 +203,377 @@ exports[`Temurin Release Notes page > renders correctly 1`] = `
                           </div>
                         </div>
                         <div
-                          class="MuiDataGrid-menuIcon"
+                          class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--resizable MuiDataGrid-columnSeparator--sideRight"
+                          style="min-height: 56px; opacity: 1;"
                         >
-                          <button
-                            aria-expanded="false"
-                            aria-haspopup="menu"
-                            aria-label="Menu"
-                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
-                            data-mui-internal-clone-element="true"
-                            id=":r7:"
-                            tabindex="-1"
-                            type="button"
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
+                            data-testid="SeparatorIcon"
+                            focusable="false"
+                            viewBox="0 0 24 24"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
-                              data-testid="TripleDotsVerticalIcon"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                              />
-                            </svg>
-                            <span
-                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            <path
+                              d="M11 19V5h2v14z"
                             />
-                          </button>
+                          </svg>
                         </div>
                       </div>
                       <div
-                        class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--sideRight"
-                        style="min-height: 56px; opacity: 1;"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
-                          data-testid="SeparatorIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M11 19V5h2v14z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                    <div
-                      aria-colindex="2"
-                      aria-label="Type"
-                      aria-sort="none"
-                      class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
-                      data-field="type"
-                      role="columnheader"
-                      style="height: 56px; width: 100px; min-width: 100px; max-width: 100px;"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="MuiDataGrid-columnHeaderDraggableContainer"
-                        draggable="false"
-                        role="presentation"
+                        aria-colindex="2"
+                        aria-label="Type"
+                        aria-sort="none"
+                        class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
+                        data-field="type"
+                        role="columnheader"
+                        style="height: 56px; width: 100px; min-width: 100px; max-width: 100px;"
+                        tabindex="-1"
                       >
                         <div
-                          class="MuiDataGrid-columnHeaderTitleContainer"
+                          class="MuiDataGrid-columnHeaderDraggableContainer"
+                          draggable="false"
                           role="presentation"
                         >
                           <div
-                            class="MuiDataGrid-columnHeaderTitleContainerContent"
+                            class="MuiDataGrid-columnHeaderTitleContainer"
+                            role="presentation"
                           >
                             <div
-                              aria-label=""
-                              class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
-                              data-mui-internal-clone-element="true"
+                              class="MuiDataGrid-columnHeaderTitleContainerContent"
                             >
-                              Type
+                              <div
+                                aria-label=""
+                                class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
+                                data-mui-internal-clone-element="true"
+                              >
+                                Type
+                              </div>
                             </div>
                           </div>
+                          <div
+                            class="MuiDataGrid-menuIcon"
+                          >
+                            <button
+                              aria-expanded="false"
+                              aria-haspopup="menu"
+                              aria-label="Menu"
+                              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                              data-mui-internal-clone-element="true"
+                              id=":rd:"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                                data-testid="TripleDotsVerticalIcon"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                                />
+                              </svg>
+                              <span
+                                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                              />
+                            </button>
+                          </div>
                         </div>
                         <div
-                          class="MuiDataGrid-menuIcon"
+                          class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--resizable MuiDataGrid-columnSeparator--sideRight"
+                          style="min-height: 56px; opacity: 1;"
                         >
-                          <button
-                            aria-expanded="false"
-                            aria-haspopup="menu"
-                            aria-label="Menu"
-                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
-                            data-mui-internal-clone-element="true"
-                            id=":rd:"
-                            tabindex="-1"
-                            type="button"
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
+                            data-testid="SeparatorIcon"
+                            focusable="false"
+                            viewBox="0 0 24 24"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
-                              data-testid="TripleDotsVerticalIcon"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                              />
-                            </svg>
-                            <span
-                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            <path
+                              d="M11 19V5h2v14z"
                             />
-                          </button>
+                          </svg>
                         </div>
                       </div>
                       <div
-                        class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--sideRight"
-                        style="min-height: 56px; opacity: 1;"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
-                          data-testid="SeparatorIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M11 19V5h2v14z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                    <div
-                      aria-colindex="3"
-                      aria-label="Component"
-                      aria-sort="none"
-                      class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
-                      data-field="component"
-                      role="columnheader"
-                      style="height: 56px; width: 150px; min-width: 150px; max-width: 150px;"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="MuiDataGrid-columnHeaderDraggableContainer"
-                        draggable="false"
-                        role="presentation"
+                        aria-colindex="3"
+                        aria-label="Component"
+                        aria-sort="none"
+                        class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
+                        data-field="component"
+                        role="columnheader"
+                        style="height: 56px; width: 150px; min-width: 150px; max-width: 150px;"
+                        tabindex="-1"
                       >
                         <div
-                          class="MuiDataGrid-columnHeaderTitleContainer"
+                          class="MuiDataGrid-columnHeaderDraggableContainer"
+                          draggable="false"
                           role="presentation"
                         >
                           <div
-                            class="MuiDataGrid-columnHeaderTitleContainerContent"
+                            class="MuiDataGrid-columnHeaderTitleContainer"
+                            role="presentation"
                           >
                             <div
-                              aria-label=""
-                              class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
-                              data-mui-internal-clone-element="true"
+                              class="MuiDataGrid-columnHeaderTitleContainerContent"
                             >
-                              Component
+                              <div
+                                aria-label=""
+                                class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
+                                data-mui-internal-clone-element="true"
+                              >
+                                Component
+                              </div>
                             </div>
                           </div>
+                          <div
+                            class="MuiDataGrid-menuIcon"
+                          >
+                            <button
+                              aria-expanded="false"
+                              aria-haspopup="menu"
+                              aria-label="Menu"
+                              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                              data-mui-internal-clone-element="true"
+                              id=":rj:"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                                data-testid="TripleDotsVerticalIcon"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                                />
+                              </svg>
+                              <span
+                                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                              />
+                            </button>
+                          </div>
                         </div>
                         <div
-                          class="MuiDataGrid-menuIcon"
+                          class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--resizable MuiDataGrid-columnSeparator--sideRight"
+                          style="min-height: 56px; opacity: 1;"
                         >
-                          <button
-                            aria-expanded="false"
-                            aria-haspopup="menu"
-                            aria-label="Menu"
-                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
-                            data-mui-internal-clone-element="true"
-                            id=":rj:"
-                            tabindex="-1"
-                            type="button"
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
+                            data-testid="SeparatorIcon"
+                            focusable="false"
+                            viewBox="0 0 24 24"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
-                              data-testid="TripleDotsVerticalIcon"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                              />
-                            </svg>
-                            <span
-                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            <path
+                              d="M11 19V5h2v14z"
                             />
-                          </button>
+                          </svg>
                         </div>
                       </div>
                       <div
-                        class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--sideRight"
-                        style="min-height: 56px; opacity: 1;"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
-                          data-testid="SeparatorIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M11 19V5h2v14z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                    <div
-                      aria-colindex="4"
-                      aria-label="Issue"
-                      aria-sort="none"
-                      class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
-                      data-field="id"
-                      role="columnheader"
-                      style="height: 56px; width: 150px; min-width: 150px; max-width: 150px;"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="MuiDataGrid-columnHeaderDraggableContainer"
-                        draggable="false"
-                        role="presentation"
+                        aria-colindex="4"
+                        aria-label="Issue"
+                        aria-sort="none"
+                        class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
+                        data-field="id"
+                        role="columnheader"
+                        style="height: 56px; width: 150px; min-width: 150px; max-width: 150px;"
+                        tabindex="-1"
                       >
                         <div
-                          class="MuiDataGrid-columnHeaderTitleContainer"
+                          class="MuiDataGrid-columnHeaderDraggableContainer"
+                          draggable="false"
                           role="presentation"
                         >
                           <div
-                            class="MuiDataGrid-columnHeaderTitleContainerContent"
+                            class="MuiDataGrid-columnHeaderTitleContainer"
+                            role="presentation"
                           >
                             <div
-                              aria-label=""
-                              class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
-                              data-mui-internal-clone-element="true"
+                              class="MuiDataGrid-columnHeaderTitleContainerContent"
                             >
-                              Issue
+                              <div
+                                aria-label=""
+                                class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
+                                data-mui-internal-clone-element="true"
+                              >
+                                Issue
+                              </div>
                             </div>
                           </div>
+                          <div
+                            class="MuiDataGrid-menuIcon"
+                          >
+                            <button
+                              aria-expanded="false"
+                              aria-haspopup="menu"
+                              aria-label="Menu"
+                              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                              data-mui-internal-clone-element="true"
+                              id=":rp:"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                                data-testid="TripleDotsVerticalIcon"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                                />
+                              </svg>
+                              <span
+                                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                              />
+                            </button>
+                          </div>
                         </div>
                         <div
-                          class="MuiDataGrid-menuIcon"
+                          class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--resizable MuiDataGrid-columnSeparator--sideRight"
+                          style="min-height: 56px; opacity: 1;"
                         >
-                          <button
-                            aria-expanded="false"
-                            aria-haspopup="menu"
-                            aria-label="Menu"
-                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
-                            data-mui-internal-clone-element="true"
-                            id=":rp:"
-                            tabindex="-1"
-                            type="button"
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
+                            data-testid="SeparatorIcon"
+                            focusable="false"
+                            viewBox="0 0 24 24"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
-                              data-testid="TripleDotsVerticalIcon"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                              />
-                            </svg>
-                            <span
-                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            <path
+                              d="M11 19V5h2v14z"
                             />
-                          </button>
+                          </svg>
                         </div>
                       </div>
                       <div
-                        class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--sideRight"
-                        style="min-height: 56px; opacity: 1;"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
-                          data-testid="SeparatorIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M11 19V5h2v14z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                    <div
-                      aria-colindex="5"
-                      aria-label="Title"
-                      aria-sort="none"
-                      class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
-                      data-field="title"
-                      role="columnheader"
-                      style="height: 56px; width: 800px; min-width: 800px; max-width: 800px;"
-                      tabindex="-1"
-                    >
-                      <div
-                        class="MuiDataGrid-columnHeaderDraggableContainer"
-                        draggable="false"
-                        role="presentation"
+                        aria-colindex="5"
+                        aria-label="Title"
+                        aria-sort="none"
+                        class="MuiDataGrid-columnHeader MuiDataGrid-withBorderColor"
+                        data-field="title"
+                        role="columnheader"
+                        style="height: 56px; width: 800px; min-width: 800px; max-width: 800px;"
+                        tabindex="-1"
                       >
                         <div
-                          class="MuiDataGrid-columnHeaderTitleContainer"
+                          class="MuiDataGrid-columnHeaderDraggableContainer"
+                          draggable="false"
                           role="presentation"
                         >
                           <div
-                            class="MuiDataGrid-columnHeaderTitleContainerContent"
+                            class="MuiDataGrid-columnHeaderTitleContainer"
+                            role="presentation"
                           >
                             <div
-                              aria-label=""
-                              class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
-                              data-mui-internal-clone-element="true"
+                              class="MuiDataGrid-columnHeaderTitleContainerContent"
                             >
-                              Title
+                              <div
+                                aria-label=""
+                                class="MuiDataGrid-columnHeaderTitle css-t89xny-MuiDataGrid-columnHeaderTitle"
+                                data-mui-internal-clone-element="true"
+                              >
+                                Title
+                              </div>
                             </div>
                           </div>
+                          <div
+                            class="MuiDataGrid-menuIcon"
+                          >
+                            <button
+                              aria-expanded="false"
+                              aria-haspopup="menu"
+                              aria-label="Menu"
+                              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
+                              data-mui-internal-clone-element="true"
+                              id=":rv:"
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
+                                data-testid="TripleDotsVerticalIcon"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+                                />
+                              </svg>
+                              <span
+                                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                              />
+                            </button>
+                          </div>
                         </div>
                         <div
-                          class="MuiDataGrid-menuIcon"
+                          class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--resizable MuiDataGrid-columnSeparator--sideRight"
+                          style="min-height: 56px; opacity: 1;"
                         >
-                          <button
-                            aria-expanded="false"
-                            aria-haspopup="menu"
-                            aria-label="Menu"
-                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall MuiDataGrid-menuIconButton css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root"
-                            data-mui-internal-clone-element="true"
-                            id=":rv:"
-                            tabindex="-1"
-                            type="button"
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
+                            data-testid="SeparatorIcon"
+                            focusable="false"
+                            viewBox="0 0 24 24"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root"
-                              data-testid="TripleDotsVerticalIcon"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-                              />
-                            </svg>
-                            <span
-                              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                            <path
+                              d="M11 19V5h2v14z"
                             />
-                          </button>
+                          </svg>
                         </div>
                       </div>
                       <div
-                        class="MuiDataGrid-columnSeparator MuiDataGrid-columnSeparator--sideRight"
-                        style="min-height: 56px; opacity: 1;"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiDataGrid-iconSeparator css-i4bv87-MuiSvgIcon-root"
-                          data-testid="SeparatorIcon"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M11 19V5h2v14z"
-                          />
-                        </svg>
-                      </div>
+                        class="MuiDataGrid-filler"
+                        role="presentation"
+                      />
+                      <div
+                        class="MuiDataGrid-scrollbarFiller MuiDataGrid-scrollbarFiller--header"
+                        role="presentation"
+                      />
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                class="MuiDataGrid-virtualScroller css-qvtrhg-MuiDataGrid-virtualScroller"
-                role="presentation"
-                style="overflow-x: hidden; overflow-y: hidden;"
-              >
                 <div
                   class="MuiDataGrid-virtualScrollerContent css-1kwdphh-MuiDataGrid-virtualScrollerContent"
                   role="presentation"
-                  style="width: auto; height: 52px; min-height: auto;"
+                  style="width: auto; height: 0px;"
                 >
                   <div
                     class="MuiDataGrid-virtualScrollerRenderZone css-s1v7zr-MuiDataGrid-virtualScrollerRenderZone"
                     role="rowgroup"
-                    style="transform: translate3d(0px, 0px, 0px);"
+                    style="transform: translate3d(0, 0px, 0);"
                   >
                     <div
                       aria-rowindex="2"
                       aria-selected="false"
-                      class="MuiDataGrid-row MuiDataGrid-row--lastVisible MuiDataGrid-row--dynamicHeight"
+                      class="MuiDataGrid-row MuiDataGrid-row--firstVisible MuiDataGrid-row--lastVisible MuiDataGrid-row--dynamicHeight"
                       data-id="0"
                       data-rowindex="0"
                       role="row"
-                      style="max-height: none; min-height: auto;"
+                      style="max-height: none; min-height: auto; --height: auto;"
                     >
+                      <div
+                        class="MuiDataGrid-cellOffsetLeft"
+                        role="presentation"
+                        style="width: 0px;"
+                      />
                       <div
                         aria-colindex="1"
                         aria-colspan="1"
-                        class="MuiDataGrid-cell--withRenderer MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                        class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                         data-colindex="0"
                         data-field="priority"
-                        role="cell"
-                        style="min-width: 100px; max-width: 100px; min-height: auto; max-height: none;"
+                        role="gridcell"
+                        style="--width: 100px;"
                         tabindex="-1"
                       >
                         <span
@@ -563,11 +586,11 @@ exports[`Temurin Release Notes page > renders correctly 1`] = `
                       <div
                         aria-colindex="2"
                         aria-colspan="1"
-                        class="MuiDataGrid-cell--withRenderer MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                        class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                         data-colindex="1"
                         data-field="type"
-                        role="cell"
-                        style="min-width: 100px; max-width: 100px; min-height: auto; max-height: none;"
+                        role="gridcell"
+                        style="--width: 100px;"
                         tabindex="-1"
                       >
                         <span>
@@ -577,29 +600,24 @@ exports[`Temurin Release Notes page > renders correctly 1`] = `
                       <div
                         aria-colindex="3"
                         aria-colspan="1"
-                        class="MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                        class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                         data-colindex="2"
                         data-field="component"
-                        role="cell"
-                        style="min-width: 150px; max-width: 150px; min-height: auto; max-height: none;"
+                        role="gridcell"
+                        style="--width: 150px;"
                         tabindex="-1"
+                        title="component_mock"
                       >
-                        <div
-                          class="MuiDataGrid-cellContent"
-                          role="presentation"
-                          title="component_mock"
-                        >
-                          component_mock
-                        </div>
+                        component_mock
                       </div>
                       <div
                         aria-colindex="4"
                         aria-colspan="1"
-                        class="MuiDataGrid-cell--withRenderer MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                        class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                         data-colindex="3"
                         data-field="id"
-                        role="cell"
-                        style="min-width: 150px; max-width: 150px; min-height: auto; max-height: none;"
+                        role="gridcell"
+                        style="--width: 150px;"
                         tabindex="-1"
                       >
                         <a
@@ -613,24 +631,31 @@ exports[`Temurin Release Notes page > renders correctly 1`] = `
                       <div
                         aria-colindex="5"
                         aria-colspan="1"
-                        class="MuiDataGrid-cell MuiDataGrid-cell--textLeft MuiDataGrid-withBorderColor"
+                        class="MuiDataGrid-cell MuiDataGrid-cell--textLeft"
                         data-colindex="4"
                         data-field="title"
-                        role="cell"
-                        style="min-width: 800px; max-width: 800px; min-height: auto; max-height: none;"
+                        role="gridcell"
+                        style="--width: 800px;"
                         tabindex="-1"
+                        title="title_mock"
                       >
-                        <div
-                          class="MuiDataGrid-cellContent"
-                          role="presentation"
-                          title="title_mock"
-                        >
-                          title_mock
-                        </div>
+                        title_mock
                       </div>
                     </div>
                   </div>
                 </div>
+                <div
+                  class="MuiDataGrid-bottomContainer MuiDataGrid-container--bottom css-14egwce"
+                  role="presentation"
+                />
+              </div>
+              <div
+                class="MuiDataGrid-scrollbar MuiDataGrid-scrollbar--horizontal css-1rtad1"
+                tabindex="-1"
+              >
+                <div
+                  class="MuiDataGrid-scrollbarContent css-1baulvz"
+                />
               </div>
             </div>
             <div