From e52e384fa89ad0a4c6b82d1ada00595a518f2b87 Mon Sep 17 00:00:00 2001
From: popcorny <celu@infuseai.io>
Date: Thu, 16 Jan 2025 09:47:51 +0800
Subject: [PATCH] Add portal to the column renderer

Signed-off-by: popcorny <celu@infuseai.io>
Co-authored-by:  even-wei <evenwei@infuseai.io>
---
 .../valuediff/ValueDiffResultView.tsx         | 47 ++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/js/src/components/valuediff/ValueDiffResultView.tsx b/js/src/components/valuediff/ValueDiffResultView.tsx
index 4abde519..bf7895b3 100644
--- a/js/src/components/valuediff/ValueDiffResultView.tsx
+++ b/js/src/components/valuediff/ValueDiffResultView.tsx
@@ -10,6 +10,7 @@ import {
   MenuGroup,
   MenuItem,
   MenuList,
+  Portal,
   Spacer,
 } from "@chakra-ui/react";
 
@@ -70,27 +71,31 @@ function ColumnNameCell({
               size={"sm"}
             />
 
-            <MenuList lineHeight="20px">
-              <MenuGroup title="Action" as={Box} fontSize="8pt">
-                <MenuItem
-                  fontSize="10pt"
-                  onClick={() => handleValueDiffDetail({}, { showForm: true })}
-                >
-                  Show mismatched values...
-                </MenuItem>
-                <MenuItem
-                  fontSize="10pt"
-                  onClick={() =>
-                    handleValueDiffDetail(
-                      { columns: [column] },
-                      { showForm: false }
-                    )
-                  }
-                >
-                  Show mismatched values for &apos;{column}&apos;
-                </MenuItem>
-              </MenuGroup>
-            </MenuList>
+            <Portal>
+              <MenuList lineHeight="20px">
+                <MenuGroup title="Action" as={Box} fontSize="8pt">
+                  <MenuItem
+                    fontSize="10pt"
+                    onClick={() =>
+                      handleValueDiffDetail({}, { showForm: true })
+                    }
+                  >
+                    Show mismatched values...
+                  </MenuItem>
+                  <MenuItem
+                    fontSize="10pt"
+                    onClick={() =>
+                      handleValueDiffDetail(
+                        { columns: [column] },
+                        { showForm: false }
+                      )
+                    }
+                  >
+                    Show mismatched values for &apos;{column}&apos;
+                  </MenuItem>
+                </MenuGroup>
+              </MenuList>
+            </Portal>
           </>
         )}
       </Menu>