chore(context-menu): use anchor ref and compact menu

[kraenhansen]

Description

Merging this PR will:

• Use a separate anchor ref instead of nesting the menu under the trigger, to allow it updating its height as expected.
• Force use of a compact menu styling (until we have LG-5013).

Checklist

• New tests and/or benchmarks are included
• Documentation is changed or added
• If this change updates the UI, screenshots/videos are added and a design review is requested
• I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

• Bugfix
• New feature
• Dependency update
• Misc

Open Questions

Dependents

Types of changes

• Backport Needed
• Patch (non-breaking change which fixes an issue)
• Minor (non-breaking change which adds functionality)
• Major (fix or feature that would cause existing functionality to change)

[Copilot]

Pull Request Overview

This PR refactors the context menu to use an external anchor element for positioning, applies temporary compact styling, and updates related tests to reflect the new data-testid attributes.

• Switches from nesting the menu under its trigger to an absolutely positioned anchor ref
• Applies compact menu and item CSS overrides via Emotion
• Updates tests to query context-menu-container instead of the old context-menu id, and adjusts ContentWithFallback tests accordingly

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
context-menu.tsx	Introduce anchorRef, remove useEffect, add compact CSS classes
context-menu.spec.tsx	Change selector to [data-testid="context-menu-container"]
content-with-fallback.spec.tsx	Update test description/assertion to context-menu-container and add an unused import

Comments suppressed due to low confidence (1)

packages/compass-components/src/components/context-menu.tsx:74

• The new menuStyles and itemStyles compact overrides aren’t currently asserted in any tests. Consider adding a test to verify that these classes are applied correctly to the menu and items.

        className={menuStyles}

[Copilot]

Updating anchorRef.current.style directly on every render can lead to unnecessary DOM writes. Consider wrapping these updates in a useLayoutEffect that only runs when position changes.

Suggested change

	if (anchorRef.current) {
	anchorRef.current.style.left = `${position.x}px`;
	anchorRef.current.style.top = `${position.y}px`;
	}
	React.useLayoutEffect(() => {
	if (anchorRef.current) {
	anchorRef.current.style.left = `${position.x}px`;
	anchorRef.current.style.top = `${position.y}px`;
	}
	}, [position]);

[kraenhansen]

Unfortunately, we have to do this outside of a useEffect or useLayoutEffect for it to work.

[Anemy]

If we want to address this when that ticket is resolved, we can create a ticket marked as Blocked and link the tickets as depends upon. Then when it's resolved that ticket will get set to open and we get reminded of it.

Fine as is, I figured I'd mention in case you haven't done that flow before.