fix Banner spacing

[llastflowers]

Closes https://github.com/github/primer/issues/3720

Changelog

Changed

Styling update addressing banner spacing issues--see vertical alignment on single line banner below (before / after):

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

I used the following Playground settings to see this view where the issue was occurring (viewable here):

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 5f281fc

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.18 KB (0%)
packages/react/dist/browser.umd.js	92.25 KB (0%)

[Copilot]

Pull Request Overview

This patch fixes the vertical alignment of the Banner component and corrects a typo in the story description.

• Aligns banner content centrally instead of at the start
• Fixes typo in the Playground description text
• Adds a changeset to trigger a patch release

Reviewed Changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated no comments.

File	Description
Banner.stories.tsx	Corrected typo in the description arg (en able → enable)
Banner.module.css	Changed align-items from start to center in container
.changeset/big-hairs-agree.md	Added changeset entry for a patch release

[llastflowers]

Documenting some context for the newer code changes based on slack DMs with @lukasoppermann:

The change that addressed this original issue (before/after):

was causing this view to look wonky because the x was not vertically aligned, and the buttons now are:

So I have conditionally applied a matching style to the dismiss x to align it with buttons when present:

but the x will not move if there are no buttons, to prevent it from moving from its current top-right default position:

Margins adjusted with buttons vs. default: