Header: add overflow

[siddharthkp]

• Fixeshttps://github.com/github/primer/issues/3391

We recommend rethinking how this component's CSS is implemented. While it currently focuses primarily on making sure items are vertically aligned, it does not account for cases where the content is wider than the viewport. This may require further design consideration (for instance, forcing content to break to a new line whenever there is insufficient space).

Before	After
When there a lot of items, the Header makes the page grow wider and adds a scrollbar	When there are a lot of items, the Header becomes scrollable without making the page wider

Note: This is a bit of a silly fix because it's not common at all to have a scrollable Header.

However, this component however is an outdated pattern that is barely used: 6 instances in dotcom out of 0 are as it's intended usage as a navigation header. 5 in other places. We have alternatives like UnderlineNav that are recommended.

So this feels like a safe change to make to pass an accessibility review without getting into a rabbit hole about correct usage or deprecation in this PR

[changeset-bot]

🦋 Changeset detected

Latest commit: 1dcfabb

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	Patch

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]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	92.35 KB (-0.02% 🔽)
packages/react/dist/browser.umd.js	92.71 KB (+0.03% 🔺)

[TylerJDev]

Looks good!

I see there's some differing opinions on if 1.4.10 Reflow passes with a scrollbar in one dimension or if all content should be fully present in the viewport. I think this is a good approach, and if we need to iterate further in the future we can. I don't think we need to go the strict route since the usage of this component is limited, and part of the responsibility is on the consumer, at least for now.