From 859f16740bd76ae72f9c90b8a913cb0a11053a78 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sat, 28 Mar 2026 19:19:00 +0000
Subject: [PATCH] tooltip portal

---
 .../editor/components/table/table-menu.tsx    | 54 +++++++++++++++----
 1 file changed, 43 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/features/editor/components/table/table-menu.tsx b/apps/client/src/features/editor/components/table/table-menu.tsx
index 66fe4d7b..4adafb20 100644
--- a/apps/client/src/features/editor/components/table/table-menu.tsx
+++ b/apps/client/src/features/editor/components/table/table-menu.tsx
@@ -34,7 +34,7 @@ export const TableMenu = React.memo(
         if (isTextSelected(editor)) return false;
         return editor.isActive("table") && !isCellSelection(state.selection);
       },
-      [editor]
+      [editor],
     );
 
     const getReferencedVirtualElement = useCallback(() => {
@@ -121,7 +121,11 @@ export const TableMenu = React.memo(
         shouldShow={shouldShow}
       >
         <div className={classes.toolbar}>
-          <Tooltip position="top" label={t("Add left column")}>
+          <Tooltip
+            position="top"
+            label={t("Add left column")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={addColumnLeft}
               variant="subtle"
@@ -132,7 +136,11 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Add right column")}>
+          <Tooltip
+            position="top"
+            label={t("Add right column")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={addColumnRight}
               variant="subtle"
@@ -143,7 +151,11 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Delete column")}>
+          <Tooltip
+            position="top"
+            label={t("Delete column")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={deleteColumn}
               variant="subtle"
@@ -156,7 +168,11 @@ export const TableMenu = React.memo(
 
           <div className={classes.divider} />
 
-          <Tooltip position="top" label={t("Add row above")}>
+          <Tooltip
+            position="top"
+            label={t("Add row above")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={addRowAbove}
               variant="subtle"
@@ -167,7 +183,11 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Add row below")}>
+          <Tooltip
+            position="top"
+            label={t("Add row below")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={addRowBelow}
               variant="subtle"
@@ -178,7 +198,7 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Delete row")}>
+          <Tooltip position="top" label={t("Delete row")} withinPortal={false}>
             <ActionIcon
               onClick={deleteRow}
               variant="subtle"
@@ -191,7 +211,11 @@ export const TableMenu = React.memo(
 
           <div className={classes.divider} />
 
-          <Tooltip position="top" label={t("Toggle header row")}>
+          <Tooltip
+            position="top"
+            label={t("Toggle header row")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={toggleHeaderRow}
               variant="subtle"
@@ -202,7 +226,11 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <Tooltip position="top" label={t("Toggle header column")}>
+          <Tooltip
+            position="top"
+            label={t("Toggle header column")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={toggleHeaderColumn}
               variant="subtle"
@@ -215,7 +243,11 @@ export const TableMenu = React.memo(
 
           <div className={classes.divider} />
 
-          <Tooltip position="top" label={t("Delete table")}>
+          <Tooltip
+            position="top"
+            label={t("Delete table")}
+            withinPortal={false}
+          >
             <ActionIcon
               onClick={deleteTable}
               variant="subtle"
@@ -228,7 +260,7 @@ export const TableMenu = React.memo(
         </div>
       </BubbleMenu>
     );
-  }
+  },
 );
 
 export default TableMenu;