ActionMenu with overflow doesn’t contain scrollbars within its rounded border

[dylanatsmith]

Description

Scrollbar contained within rounded corners of ActionList

Steps to reproduce

1. Put a whole bunch of items in an ActionMenu too short to contain them
2. You may need to force enable scrollbars at OS level

Version

Whatever’s in dotcom

Browser

No response

[github-actions[bot]]

Uh oh! @dylanatsmith, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[siddharthkp]

Just passing by: overflow: scroll should be on the ActionList inside the Overlay. not on the overflow itself, that way we can ensure the border radius of the Overlay stays intact

[lesliecdubs]

Wondering if someone in Primer Design might be able to take a look and weigh in on the CSS change needed here?

[tallys]

@camertron can you follow up on this if it's React?

[lesliecdubs]

@tallys confirmed via Storybook that I believe this is happening in React.

[francinelucca]

Tested this suggestion: https://github.com/primer/react/issues/4938#issuecomment-2340216670. Setting the overflow inside the ActionList doesn't solve the problem by itself because the ActionList is unaware of the max-height set by the overlay due to the overlay being absolutely positioned. In order for the overflow to work in the ActionList, it would have to be given a max-height as well. Throwing this back in the backlog as a solution for this will require further discussion