[MenuItem] Selected menu items (with checkmarks) are misaligned with unselected menu items for large scale #3396
Open
Description
Description
Selected menu items with checkmarks are not aligned with unselected menu items on large screen sizes. This causes a visible shift in menu item content when we select and unselect it.
Steps to reproduce
- Go to https://opensource.adobe.com/spectrum-css/preview/index.html?path=/story/components-menu--default&args=selectionMode:single;size:l&globals=context:express;scale:large
- Remove the
is-selected
class from one of the selected menu items - Observe the shift in the menu item
Expected behavior
The menu item should not shift horizontally when we are selecting or unselecting it.
Screenshots
Screen.Recording.2024-11-13.at.11.37.10.AM.mov
Environment
- Version of the impacted component(s):
- Browser(s) and OS(s):
Additional context
Please see this thread with a proposed solution by Nikki Massaro: https://cclight.slack.com/archives/CESK60MQD/p1731527118225569?thread_ts=1731520846.411549&cid=CESK60MQD
The checkmark icon has margin that isn't accounted for when we are calculating the computed size of the menu items.