From 8100d6d07576217fc3b1331b4b0693725a41c4e0 Mon Sep 17 00:00:00 2001
From: Ivaylo Pavlov <ivailo90@gmail.com>
Date: Sat, 4 Jan 2025 01:12:04 +0000
Subject: [PATCH] [lexical-playground] Fix table hover actions button position
 (#7011)

---
 .../plugins/TableHoverActionsPlugin/index.tsx | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
index 00b1169f06e..da7e1bd3c21 100644
--- a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
@@ -115,6 +115,19 @@ function TableHoverActionsContainer({
           height: tableElemHeight,
         } = (tableDOMElement as HTMLTableElement).getBoundingClientRect();
 
+        // Adjust for using the scrollable table container
+        const parentElement = (tableDOMElement as HTMLTableElement)
+          .parentElement;
+        let tableHasScroll = false;
+        if (
+          parentElement &&
+          parentElement.classList.contains(
+            'PlaygroundEditorTheme__tableScrollableWrapper',
+          )
+        ) {
+          tableHasScroll =
+            parentElement.scrollWidth > parentElement.clientWidth;
+        }
         const {y: editorElemY, left: editorElemLeft} =
           anchorElem.getBoundingClientRect();
 
@@ -123,9 +136,15 @@ function TableHoverActionsContainer({
           setShownRow(true);
           setPosition({
             height: BUTTON_WIDTH_PX,
-            left: tableElemLeft - editorElemLeft,
+            left:
+              tableHasScroll && parentElement
+                ? parentElement.offsetLeft
+                : tableElemLeft - editorElemLeft,
             top: tableElemBottom - editorElemY + 5,
-            width: tableElemWidth,
+            width:
+              tableHasScroll && parentElement
+                ? parentElement.offsetWidth
+                : tableElemWidth,
           });
         } else if (hoveredColumnNode) {
           setShownColumn(true);