`UnderlineNav2` incorrectly calculating nav area when moving pages.

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

Description

It works fine to move to a page outside the more button, but if you move to a page inside the more button, the more button disappears.

Screen.Recording.2022-12-06.at.5.48.00.AM.mov

Steps to reproduce

1. Reduce window width to check more button
2. Open more and navigate to another page. After you do it a few times, it will be reproduced.

Version

v35.15.1

Browser

Chrome

[lesliecdubs]

@broccolinisoup might you be interested in looking into this in the next few weeks?

[broccolinisoup]

Sure @lesliecdubs!

👋🏼 @b6pzeusbc54tvhw5jgpyw8pwz2x6gs, thanks for reporting this. I quickly tried it out but cannot reproduce it. Something worth mentioning though, we released a change on v35.15.0 on the API for exposing aria-current to the API and making the selected prop redundant for selected state. We released this as a minor change because UnderlineNav2 is still draft and unfortunately we are experiencing an issue where some of our recent docs update couldn't make it to the production and UnderlineNav docs were affected by this issue. Apologise for this inconvenience, and we are working on fixing them.

This is the updated docs : https://primer-afcff743b7-13348165.drafts.github.io/drafts/UnderlineNav2 If you could use aria-current to manage the selected state, I really hope you won't experience this issue 🤞🏼 If you have already updated your code before posting the issue or even using aria-current still causes the same problem, could I please ask more information like some code snippets etc?

Thanks again for taking the time to report this!

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

@broccolinisoup After updating the react and nextjs packages to the latest version, the problem in the video above was not reproduced, but similar problems still occur. So I changed the title of this issue.

I made an example with codesandbox stackblitz for reproduction, you can check it out here.

https://codesandbox.io/p/sandbox/primer-underline-nav2-bug-ojlgdh https://stackblitz.com/edit/primer-undelinenav2-issue-2651-2676

Screen.Recording.2022-12-10.at.2.24.04.PM.mov

[b6pzeusbc54tvhw5jgpyw8pwz2x6gs]

Codesandbox was unstable, so I recreated it with stackblitz.

https://stackblitz.com/edit/primer-undelinenav2-issue-2651-2676

[broccolinisoup]

👋 @b6pzeusbc54tvhw5jgpyw8pwz2x6gs thanks so much for the stackblitz! That will be very helpful to debug. I'll look into this and see what is going on 👀