From 84898dca5d1a2079af8968bde8759f718d7fe1f7 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Fri, 5 Jan 2024 10:04:34 +0000
Subject: [PATCH] Remove margin from table grid popover (#16337)

Co-authored-by: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
GitOrigin-RevId: 71673d7d9a18baf44027e82cc34058e3db052591
---
 .../components/toolbar/table-inserter-dropdown.tsx |  6 ++++--
 .../extensions/toolbar/toolbar-panel.ts            | 14 +++++++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/toolbar/table-inserter-dropdown.tsx b/services/web/frontend/js/features/source-editor/components/toolbar/table-inserter-dropdown.tsx
index 53c7c55922..248fec1cd6 100644
--- a/services/web/frontend/js/features/source-editor/components/toolbar/table-inserter-dropdown.tsx
+++ b/services/web/frontend/js/features/source-editor/components/toolbar/table-inserter-dropdown.tsx
@@ -63,9 +63,11 @@ export const TableInserterDropdown = memo(() => {
         <Popover
           id="toolbar-table-menu"
           ref={ref}
-          className="ol-cm-toolbar-button-menu-popover ol-cm-toolbar-table-grid-popover"
+          className="ol-cm-toolbar-button-menu-popover ol-cm-toolbar-button-menu-popover-unstyled"
         >
-          <SizeGrid sizeX={10} sizeY={10} onSizeSelected={onSizeSelected} />
+          <div className="ol-cm-toolbar-table-grid-popover">
+            <SizeGrid sizeX={10} sizeY={10} onSizeSelected={onSizeSelected} />
+          </div>
         </Popover>
       </Overlay>
     </>
diff --git a/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts b/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
index 836cd55699..92e67d484a 100644
--- a/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
@@ -69,6 +69,7 @@ export const toolbarPanel = () => [
       '& .list-group': {
         marginBottom: 0,
         backgroundColor: 'var(--editor-toolbar-bg)',
+        borderRadius: '4px',
       },
       '& .list-group-item': {
         width: '100%',
@@ -285,9 +286,20 @@ export const toolbarPanel = () => [
       fontSize: '12px',
     },
     '.ol-cm-toolbar-table-grid-popover': {
+      maxWidth: 'unset',
       padding: '8px',
-      marginLeft: '80px',
+      boxShadow: '0 5px 10px rgba(0, 0, 0, 0.2)',
+      borderRadius: '4px',
       backgroundColor: 'var(--editor-toolbar-bg)',
+      pointerEvents: 'all',
+    },
+    '.ol-cm-toolbar-button-menu-popover-unstyled': {
+      maxWidth: 'unset',
+      background: 'transparent',
+      border: 0,
+      padding: '0 8px 8px 160px',
+      boxShadow: 'none',
+      pointerEvents: 'none',
     },
   }),
 ]