Add horizontal scrolling to IDE component on small viewports

[joshfarrant]

Summary

Updated the IDE component to enable horizontal scrolling on small viewports. Previously the component would cut off content on the right-hand side and not adapt to the available space, now the tabs and the editor scroll independently.

List of notable changes:

• Added horizontal scroll to editor content
• Added horizontal scroll to editor tabs
• Scroll to active tab when active tab changes

What should reviewers focus on?

• Check you're happy with the styling of the responsive IDE

Steps to test:

1. Open the IDE component in Storybook
2. Resize the viewport
3. Observe the tabs and editor of the IDE component now scroll horizontally

Supporting resources (related issues, external links, etc):

• Closes https://github.com/github/primer/issues/3762

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

ide-responsive.mp4

[changeset-bot]

🦋 Changeset detected

Latest commit: 38d6b31

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

This PR includes changesets to release 6 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	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]

🟢 No design token changes found

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[joshfarrant]

I don't entirely understand why, but the slight change in height of the tab is due to the overflow-x: auto on the parent div. Toggling that in the dev tools causes a couple of pixels to be added/removed from the height of the tab.

Really not sure why it's happening...

[rezrah]

🙌 Works great, thanks @joshfarrant