From 2d1cc5866479ba650ac5bf22d46c7680adcd399a Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Thu, 14 Mar 2024 21:49:59 +0530
Subject: [PATCH] Minor: add wrapper for table in block editor to make it
 scrollable (#15574)

* Minor: add wrapper for table in block editor to make it scrollable

* Refactor TableMenu component to use class name 'tableWrapper' instead of attribute 'data-om-table'
---
 .../ui/src/components/BlockEditor/Extensions/index.ts         | 1 +
 .../ui/src/components/BlockEditor/TableMenu/TableMenu.tsx     | 2 +-
 .../resources/ui/src/components/BlockEditor/block-editor.less | 4 ++++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/index.ts b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/index.ts
index c20b086768a..da6f7d8adb3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/index.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/index.ts
@@ -124,6 +124,7 @@ export const extensions = [
       class: 'om-table',
       'data-om-table': 'om-table',
     },
+    resizable: true,
   }),
   TableRow.configure({
     HTMLAttributes: {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/TableMenu/TableMenu.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/TableMenu/TableMenu.tsx
index ed2fdb5e284..acee3fd4676 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/TableMenu/TableMenu.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/TableMenu/TableMenu.tsx
@@ -32,7 +32,7 @@ const TableMenu = (props: TableMenuProps) => {
 
   const handleMouseDown = useCallback((event: MouseEvent) => {
     const target = event.target as HTMLElement;
-    const table = target?.closest('[data-om-table]');
+    const table = target?.closest('.tableWrapper');
 
     if (table?.contains(target)) {
       tableMenuPopup.current?.setProps({
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/block-editor.less b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/block-editor.less
index 786a1c44dd1..1dd3acd6491 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/block-editor.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/block-editor.less
@@ -27,6 +27,10 @@
     // this is to have enough space after last node, referred from the reference editor
     padding-bottom: 30vh;
   }
+  .om-block-editor > .tableWrapper {
+    width: 100%;
+    overflow-x: auto;
+  }
   // show placeholder when editor is in focused mode
   .tiptap.ProseMirror-focused .is-node-empty.has-focus::before {
     color: @grey-3;