Spectrum 2 ActionMenu renders too narrow for descriptions on page right
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### 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_
Contributor guide
Research direction
Start with the linked CodeSandbox reproduction and inspect the Spectrum 2 ActionMenu behavior when it is aligned to the page's right edge and includes item descriptions. Trace the width calculation from the ActionMenu entry point, then verify that the menu opens at its final content-fitting width without the visible expansion animation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 65/100