UnderlineNav: Replace dynamic icon visibility logic with hardcoded breakpoints

[iansan5653]

Fixes #7823

This PR is an alternative approach to #8108 to resolve https://github.com/github/primer/issues/6806.

The problem is that some flickering is inevitable if we want to dynamically hide the icons: we have to let the container overflow in order to detect it and hide the icons, but then when we hide the icons the container no longer overflows. We can minimize flickering but we can never eliminate it with the dynamic approach. Dynamically hiding icons inherently creates an infinite feedback loop.

This PR proposes a simpler, less dynamic alternative: we just hide the icons at hardcoded breakpoints. The breakpoint at which icons are hidden can be controlled by a prop which allows for all the standard Primer breakpoint sizes. The default is very large to avoid breaking existing consumers (namely the global GitHub navigation), but it can easily be reduced by consumers who know they won't be rendering many tabs.

The result is a flicker-free, stable component. However, the drawback is that we sometimes will hide icons early than we would otherwise need to. I think this might be a fair tradeoff.

Also includes some other fixes:

1. Change overflow anchor button visibility to use display instead of visibility to avoid having to save space for it
2. Allow the first tab to wrap out of the way on very small screens by rendering an invisible first element

Changelog

New

Changed

• Replaced UnderlineNav dynamic icon visibility with static breakpoints

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

[changeset-bot]

🦋 Changeset detected

Latest commit: 8909c5a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. If this doesn't work, you can also use the original workflow here. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.