Spectrum 2 ActionMenu renders too narrow for descriptions on page right

[rkantor7]

Provide a general summary of the issue here

When an S2 ActionMenu is rendered on the right edge of the page and it has a description for at least one menu item, it initially renders at too narrow a width and expands to the left after. This results in a short animation as the menu expands in width and narrows in height. This happens even when the menu is set to align: "end".

🤔 Expected Behavior?

The menu should open to the left of the trigger at whatever width will correctly fit all the content, including menu item descriptions

😯 Current Behavior

The menu opens to the left of the trigger at a narrow width and expands to the left until all the text fits

💁 Possible Solution

I would guess that whatever calculations are being done to determine the width of the menu aren't including the description, so the menu renders initially at a width only large enough for the label text and icon.

🔦 Context

I have an ActionMenu menu that renders on the right edge of a page only when the user is significantly zoomed in or on a small screen. Because of this, the animation is highly visible to users

🖥️ Steps to Reproduce

Here is the CodeSanbox to reproduce: https://codesandbox.io/p/devbox/admiring-tamas-w6rh5g?workspaceId=ws_7FVZWaB87q5MpjbWooJK1U

Version

S2: 1.2.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS Sequoia 15.7.4

🧢 Your Company/Team

Unified Home

🕷 Tracking Issue

No response

[LFDanLu]

So the core issue here seems to be how we don't do something similar for left/right like we do for top here to measure the natural height:

react-spectrum/packages/react-aria/src/overlays/useOverlayPosition.ts

Lines 258 to 263 in 8e585df

	let overlay = overlayRef.current as HTMLElement;
	if (!maxHeight && overlayRef.current) {
	overlay.style.top = '0px';
	overlay.style.bottom = '';
	overlay.style.maxHeight = (window.visualViewport?.height ?? window.innerHeight) + 'px';
	}

The current flow first calculates a menu left when we haven't laid out the full menu width and thus using a much smaller value. However, we reuse this left on the subsequent recalculation of the overlay's position and width, inadvertantly constraining so the new width is only increased by a little bit each time, resulting in the resize observer slowly marching towards the overlay's unconstrained natural width.

I think ideally we should measure the unconstrained width of the popover before running calculatePosition, probably by setting left to 0 like above so the overlay node would be render as wide as possible, then calculatePosition could get a proper max width + positon based off the trigger's position/container padding/flipping.

[snowystinger]

Linking an old PR that I think is related, #8164

Other relevant things
https://github.com/adobe/react-spectrum/pull/6577/changes
https://github.com/adobe/react-spectrum/pull/6312/changes