From 57520ffcae69d0f39e97903f77cf81e8192579ee Mon Sep 17 00:00:00 2001
From: arpandhakal <arpandhakal20@gmail.com>
Date: Mon, 9 Jun 2025 13:16:44 +0545
Subject: [PATCH 1/2] fix(OUT-1809) : history renderer's popover element
 overflowing to the sidebar

- created a ref to track the parent element of Table(AgGridReact) component for getting boundary of the element.
- added a modifier in the pooper element to explictly render the popover element in the boundary of the table to prevent overflowing.
---
 src/components/table/Table.tsx                |  8 +++--
 .../cellRenderers/HistoryCellRenderer.tsx     | 31 ++++++++++++++++---
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
index 23b29c8..c568fc2 100644
--- a/src/components/table/Table.tsx
+++ b/src/components/table/Table.tsx
@@ -3,7 +3,7 @@ import { AgGridReact } from 'ag-grid-react';
 import 'ag-grid-community/styles/ag-grid.css'; // Core CSS
 import 'ag-grid-community/styles/ag-theme-quartz.css'; // Theme
 import './table.css';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { ClientCellRenderer } from './cellRenderers/ClientCellRenderer';
 import { CompanyCellRenderer } from './cellRenderers/CompanyCellRenderer';
 import { HistoryCellRenderer } from './cellRenderers/HistoryCellRenderer';
@@ -57,7 +57,7 @@ export const TableCore = () => {
       return stringA.localeCompare(stringB);
     }
   };
-
+  const tableRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     setRowData(appState?.clientProfileUpdates);
 
@@ -177,6 +177,9 @@ export const TableCore = () => {
                 key: el,
               };
             },
+            cellRendererParams: {
+              tableRef: tableRef,
+            },
           },
         ];
       });
@@ -194,6 +197,7 @@ export const TableCore = () => {
   return (
     <Box
       className="ag-theme-quartz"
+      ref={tableRef}
       sx={{
         height:
           arraysHaveSameElements(appState?.mutableSettings, appState?.settings) &&
diff --git a/src/components/table/cellRenderers/HistoryCellRenderer.tsx b/src/components/table/cellRenderers/HistoryCellRenderer.tsx
index c1b2fad..a214539 100644
--- a/src/components/table/cellRenderers/HistoryCellRenderer.tsx
+++ b/src/components/table/cellRenderers/HistoryCellRenderer.tsx
@@ -4,9 +4,8 @@ import { FiberManualRecord } from '@mui/icons-material';
 import { Box, CircularProgress, Popper, Stack, Typography } from '@mui/material';
 import React, { useState } from 'react';
 
-export const HistoryCellRenderer = ({ value }: { value: { row: any; key: string } }) => {
+export const HistoryCellRenderer = ({ value, tableRef }: { value: { row: any; key: string }; tableRef: any }) => {
   const appState = useAppState();
-
   const [loading, setLoading] = useState(false);
 
   const [updateHistory, setUpdateHistory] = useState<any>([]);
@@ -132,10 +131,34 @@ export const HistoryCellRenderer = ({ value }: { value: { row: any; key: string
         ) : (
           <></>
         )}
-        <Popper id={id} open={open} anchorEl={anchorEl}>
+        <Popper
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          modifiers={[
+            {
+              name: 'preventOverflow',
+              options: {
+                boundary: tableRef.current,
+              },
+            },
+          ]}
+        >
           {loading ? <CircularProgress size={20} color="inherit" /> : <HistoryList updateHistory={updateHistory} />}
         </Popper>
-        <Popper id={multiSelectAnchorId} open={multiSelectAnchorOpen} anchorEl={multiSelectAnchor}>
+        <Popper
+          id={multiSelectAnchorId}
+          open={multiSelectAnchorOpen}
+          anchorEl={multiSelectAnchor}
+          modifiers={[
+            {
+              name: 'preventOverflow',
+              options: {
+                boundary: tableRef.current,
+              },
+            },
+          ]}
+        >
           <Stack
             direction="row"
             sx={(theme) => ({

From 5fdf73275a5b0dbed376e595fa5677ad1b8a82c3 Mon Sep 17 00:00:00 2001
From: arpandhakal <arpandhakal20@gmail.com>
Date: Mon, 9 Jun 2025 13:23:18 +0545
Subject: [PATCH 2/2] fix(OUT-1809) : used appropriate type for tableRef prop
 in HistoryCellRenderer

---
 .../table/cellRenderers/HistoryCellRenderer.tsx           | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/table/cellRenderers/HistoryCellRenderer.tsx b/src/components/table/cellRenderers/HistoryCellRenderer.tsx
index a214539..9003575 100644
--- a/src/components/table/cellRenderers/HistoryCellRenderer.tsx
+++ b/src/components/table/cellRenderers/HistoryCellRenderer.tsx
@@ -4,7 +4,13 @@ import { FiberManualRecord } from '@mui/icons-material';
 import { Box, CircularProgress, Popper, Stack, Typography } from '@mui/material';
 import React, { useState } from 'react';
 
-export const HistoryCellRenderer = ({ value, tableRef }: { value: { row: any; key: string }; tableRef: any }) => {
+export const HistoryCellRenderer = ({
+  value,
+  tableRef,
+}: {
+  value: { row: any; key: string };
+  tableRef: React.RefObject<HTMLDivElement>;
+}) => {
   const appState = useAppState();
   const [loading, setLoading] = useState(false);