Use floats to hide ActionBar items to address Android Chrome overflow issue

[camertron]

What are you trying to accomplish?

This PR is attempting to address an issue mostly occurring on older Android phones where the container around ActionBar icon buttons does not resize properly on smaller screens and "squashes" the rest of the content to the left-hand side of the page:

Screenshots

Before	After

Integration

No updates required in production.

List the issues that this change affects.

Fixes: https://github.com/github/primer/issues/2859
Fixes: https://github.com/github/primer/issues/2891

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

The ActionBar component currently hides/shows items based on the amount of available horizontal space. Unfortunately such calculations are semi error-prone because padding, margin, and the presence of dividers must be taken into account, which is difficult to get right. This PR removes the width calculation logic and instead uses a container <div> with a fixed height and floated icon buttons. As the div shrinks, items are automatically wrapped to the next line. These items become invisible because of the container's fixed height. On each resize event, JavaScript loops over each item and compares its top to the first item's top. If greater, the element has wrapped to the next line and should be hidden. The corresponding menu item should be un-hidden. As the container grows, the process is done in reverse, showing items and hiding menu items.

Anything you want to highlight for special attention from reviewers?

This is probably the first time I've ever wanted floated elements to wrap lol.

Accessibility

• No new axe scan violation - This change does not introduce any new axe scan violations.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 49186b9

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

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	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

[jonrohan]

👏🏻 Honestly shocked that you were able to reduce this code so much with floats. I'm trying to think of problems with doing it this way but not sure if there are any. Would be interested in seeing it in some dotcom review lab situations.

@langermank can you think of anything that I might be overlooking?

[keithamus]

LGTM

[langermank]

Agree with @jonrohan we should test this on a lab in dotcom just to be sure 👍