From ee45661cbc27bb833f78c2c8d66e20154d5bb400 Mon Sep 17 00:00:00 2001
From: Lara Tran <lara.tran@appdirect.com>
Date: Wed, 30 Oct 2024 14:24:41 -0400
Subject: [PATCH] Ensure overflow is measured after density change

---
 .../src/components/body/MRT_TableBodyCell.module.css |  2 +-
 .../src/components/body/MRT_TableBodyCell.tsx        | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.module.css b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.module.css
index 9d985e40c..fb42d4ee1 100644
--- a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.module.css
+++ b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.module.css
@@ -76,7 +76,7 @@
 }
 
 .root-cell-hover-reveal {
-  overflow: visible
+  overflow: visible;
 }
 
 .cell-hover-reveal {
diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx
index 907be5b63..c345440b5 100644
--- a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx
+++ b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx
@@ -198,10 +198,13 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   useLayoutEffect(() => {
     const div = cellHoverRevealDivRef.current;
     if (div) {
-      const isOverflow = div.scrollWidth > div.clientWidth;
-      setIsCellContentOverflowing(isOverflow);
+      // Use setTimeout(0) to ensure DOM is fully updated before measuring overflow
+      setTimeout(() => {
+        const isOverflow = div.scrollWidth > div.clientWidth;
+        setIsCellContentOverflowing(isOverflow);
+      }, 0);
     }
-  }, [cell]);
+  }, [cell, density]);
 
   const renderCellContent = () => {
     if (cell.getIsPlaceholder()) {
@@ -326,8 +329,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
                 <> ({row.subRows?.length})</>
               )}
             </>
-          )
-        )}
+          ))}
       </>
     </TableTd>
   );