Remove margin from table grid popover (#16337)

Co-authored-by: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
GitOrigin-RevId: 71673d7d9a18baf44027e82cc34058e3db052591

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>
     </>

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',
     },
   }),
 ]