From 995fcc1285995dcf1e540ea1899890bd44ef8fb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 1 Jul 2025 14:02:26 +0200
Subject: [PATCH 1/2] Use compact styling

---
 .../src/components/context-menu.tsx              | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/compass-components/src/components/context-menu.tsx b/packages/compass-components/src/components/context-menu.tsx
index 8941cbab1da..86242535a6a 100644
--- a/packages/compass-components/src/components/context-menu.tsx
+++ b/packages/compass-components/src/components/context-menu.tsx
@@ -1,6 +1,9 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { Menu, MenuItem, MenuSeparator } from './leafygreen';
 
+import { css } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
+
 import {
   ContextMenuProvider as ContextMenuProviderBase,
   useContextMenu,
@@ -11,6 +14,17 @@ import {
 
 export type { ContextMenuItem } from '@mongodb-js/compass-context-menu';
 
+const menuStyles = css({
+  paddingTop: spacing[100],
+  paddingBottom: spacing[100],
+});
+
+const itemStyles = css({
+  paddingTop: 0,
+  paddingBottom: 0,
+  fontSize: '.8em',
+});
+
 export function ContextMenuProvider({
   children,
 }: {
@@ -51,6 +65,7 @@ export function ContextMenu({ menu }: ContextMenuWrapperProps) {
         open={menu.isOpen}
         setOpen={menu.close}
         justify="start"
+        className={menuStyles}
       >
         {itemGroups.map((items: ContextMenuItemGroup, groupIndex: number) => {
           return (
@@ -64,6 +79,7 @@ export function ContextMenu({ menu }: ContextMenuWrapperProps) {
                     key={`menu-group-${groupIndex}-item-${itemIndex}`}
                     data-text={item.label}
                     data-testid={`menu-group-${groupIndex}-item-${itemIndex}`}
+                    className={itemStyles}
                     onClick={(evt: React.MouseEvent) => {
                       item.onAction?.(evt);
                       menu.close();

From 2f571401e1fd706945d6e6179e9ceed4ca5dd7ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= <kraen.hansen@mongodb.com>
Date: Tue, 1 Jul 2025 17:29:10 +0200
Subject: [PATCH 2/2] Use anchor ref and force a compact menu

---
 .../components/content-with-fallback.spec.tsx |  8 ++--
 .../src/components/context-menu.spec.tsx      |  2 +-
 .../src/components/context-menu.tsx           | 47 +++++++++++--------
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/packages/compass-components/src/components/content-with-fallback.spec.tsx b/packages/compass-components/src/components/content-with-fallback.spec.tsx
index ac2f8a40910..9180ae54f07 100644
--- a/packages/compass-components/src/components/content-with-fallback.spec.tsx
+++ b/packages/compass-components/src/components/content-with-fallback.spec.tsx
@@ -48,7 +48,7 @@ describe('ContentWithFallback', function () {
     expect(screen.getByText('I am ready!')).to.exist;
   });
 
-  it('should render nothing when content is not ready on the first render', function () {
+  it('should render only the context menu when content is not ready on the first render', function () {
     const container = document.createElement('div');
 
     render(
@@ -59,8 +59,10 @@ describe('ContentWithFallback', function () {
     );
 
     expect(container.children.length).to.equal(1);
-    const [anchorElement] = container.children;
-    expect(anchorElement.getAttribute('data-testid')).to.equal('context-menu');
+    const [contextMenuContainer] = container.children;
+    expect(contextMenuContainer.getAttribute('data-testid')).to.equal(
+      'context-menu-container'
+    );
   });
 
   it('should render fallback when the timeout passes', async function () {
diff --git a/packages/compass-components/src/components/context-menu.spec.tsx b/packages/compass-components/src/components/context-menu.spec.tsx
index 13fd851ec0c..6319d9c07cc 100644
--- a/packages/compass-components/src/components/context-menu.spec.tsx
+++ b/packages/compass-components/src/components/context-menu.spec.tsx
@@ -46,7 +46,7 @@ describe('useContextMenuItems', function () {
 
     // Should only find one context menu (from the parent provider)
     expect(
-      container.querySelectorAll('[data-testid="context-menu"]')
+      container.querySelectorAll('[data-testid="context-menu-container"]')
     ).to.have.length(1);
     // Should still render the trigger
     expect(screen.getByTestId(menuTestTriggerId)).to.exist;
diff --git a/packages/compass-components/src/components/context-menu.tsx b/packages/compass-components/src/components/context-menu.tsx
index 86242535a6a..f6657bec66f 100644
--- a/packages/compass-components/src/components/context-menu.tsx
+++ b/packages/compass-components/src/components/context-menu.tsx
@@ -1,6 +1,5 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { Menu, MenuItem, MenuSeparator } from './leafygreen';
-
 import { css } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
 
@@ -14,9 +13,11 @@ import {
 
 export type { ContextMenuItem } from '@mongodb-js/compass-context-menu';
 
+// TODO: Remove these once https://jira.mongodb.org/browse/LG-5013 is resolved
+
 const menuStyles = css({
-  paddingTop: spacing[100],
-  paddingBottom: spacing[100],
+  paddingTop: spacing[150],
+  paddingBottom: spacing[150],
 });
 
 const itemStyles = css({
@@ -39,33 +40,39 @@ export function ContextMenuProvider({
 
 export function ContextMenu({ menu }: ContextMenuWrapperProps) {
   const menuRef = useRef(null);
+  const anchorRef = useRef<HTMLDivElement>(null);
 
   const { position, itemGroups } = menu;
 
-  useEffect(() => {
-    if (!menu.isOpen) {
-      menu.close();
-    }
-  }, [menu.isOpen]);
+  // TODO: Remove when https://jira.mongodb.org/browse/LG-5342 is resolved
+  if (anchorRef.current) {
+    anchorRef.current.style.left = `${position.x}px`;
+    anchorRef.current.style.top = `${position.y}px`;
+  }
 
   return (
-    <div
-      data-testid="context-menu"
-      style={{
-        position: 'absolute',
-        left: position.x,
-        top: position.y,
-        // This is to ensure the menu gets positioned correctly as the left and top updates
-        width: 1,
-        height: 1,
-      }}
-    >
+    <div data-testid="context-menu-container">
+      <div
+        data-testid="context-menu-anchor"
+        ref={anchorRef}
+        style={{
+          position: 'absolute',
+          left: position.x,
+          top: position.y,
+          // This is to ensure the menu gets positioned correctly as the left and top updates
+          width: 1,
+          height: 1,
+        }}
+      />
       <Menu
+        data-testid="context-menu"
+        refEl={anchorRef}
         ref={menuRef}
         open={menu.isOpen}
         setOpen={menu.close}
         justify="start"
         className={menuStyles}
+        maxHeight={Number.MAX_SAFE_INTEGER}
       >
         {itemGroups.map((items: ContextMenuItemGroup, groupIndex: number) => {
           return (