From 565de7878f0621f4617b40cf471f4b7e4263093e Mon Sep 17 00:00:00 2001
From: kalyan90 <nani.kalyan90@gmail.com>
Date: Tue, 5 Nov 2024 21:42:19 +0530
Subject: [PATCH] Fix grid overlay aligment with scroll for rtl (#15072)

Co-authored-by: Rom Grk <romgrk.cc@gmail.com>
---
 .../src/components/base/GridOverlays.tsx         | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/x-data-grid/src/components/base/GridOverlays.tsx b/packages/x-data-grid/src/components/base/GridOverlays.tsx
index b8b88d17eaa8..6b7988048b3a 100644
--- a/packages/x-data-grid/src/components/base/GridOverlays.tsx
+++ b/packages/x-data-grid/src/components/base/GridOverlays.tsx
@@ -18,18 +18,24 @@ interface GridOverlaysProps {
   loadingOverlayVariant: GridLoadingOverlayVariant | null;
 }
 
+interface GridOverlayWrapperRootProps extends GridOverlaysProps {
+  right: number;
+}
+
 const GridOverlayWrapperRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
-  shouldForwardProp: (prop) => prop !== 'overlayType' && prop !== 'loadingOverlayVariant',
+  shouldForwardProp: (prop) =>
+    prop !== 'overlayType' && prop !== 'loadingOverlayVariant' && prop !== 'right',
   overridesResolver: (props, styles) => styles.overlayWrapper,
-})<GridOverlaysProps>(({ overlayType, loadingOverlayVariant }) =>
+})<GridOverlayWrapperRootProps>(({ overlayType, loadingOverlayVariant, right }) =>
   // Skeleton overlay should flow with the scroll container and not be sticky
   loadingOverlayVariant !== 'skeleton'
     ? {
         position: 'sticky', // To stay in place while scrolling
         top: 'var(--DataGrid-headersTotalHeight)', // TODO: take pinned rows into account
         left: 0,
+        right: `${right}px`,
         width: 0, // To stay above the content instead of shifting it down
         height: 0, // To stay above the content instead of shifting it down
         zIndex:
@@ -80,7 +86,11 @@ function GridOverlayWrapper(props: React.PropsWithChildren<GridOverlaysProps>) {
   const classes = useUtilityClasses({ ...props, classes: rootProps.classes });
 
   return (
-    <GridOverlayWrapperRoot className={clsx(classes.root)} {...props}>
+    <GridOverlayWrapperRoot
+      className={clsx(classes.root)}
+      {...props}
+      right={dimensions.columnsTotalWidth - dimensions.viewportOuterSize.width}
+    >
       <GridOverlayWrapperInner
         className={clsx(classes.inner)}
         style={{