The popover for UnderlineNav is clipped in mobile viewports

[joshblack]

Description

The popover for UnderlineNav is clipped in mobile viewports

Steps to reproduce

I noticed this when using the latest repo beta opt-in 👀

1. Visit a repo: https://github.com/primer/react
2. Scroll down to the UnderlineNav usage for the README, Code of Conduct, etc
3. Narrow the viewport` to a mobile viewport size (so that the More button is visible)
4. Activate the button to trigger the popover
5. Observe that the popover is clipped by the viewport

Version

v36.x

Browser

Chrome

[lesliecdubs]

@joshblack can you share a screenshot? We tried replicating by enabling the "New organization repositories view" feature preview and then testing mobile size using the reproduction steps, but couldn't see the nav getting clipped 👀

[joshblack]

@lesliecdubs definitely! Here's one:

Basically the underline nav needs to have all items except the first one truncated to get it to happen.

[github-actions]

Uh oh! @joshblack, the image you shared is missing helpful alt text. Check #4059 (comment).

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.

[broccolinisoup]

Thanks @joshblack! Yeah this is still in the supported viewport range and we need to fix it. I guess we could leverage anchor positioning here, I'll look into it 👀