improve banner wrapping

[CON3JITO]

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

Changelog

New

• Content-length–based wrapping logic: Introduced a new getContentLength function in Banner.tsx to help determine when action buttons should wrap in banners without titles or dismiss buttons.
• Added new Storybook variants (WithHiddenTitleAndActionsShort, WithHiddenTitleAndActionsLong) to demonstrate and test different wrapping scenarios when titles are hidden or absent.
• Registered new stories in Banner.docs.json to ensure documentation accurately reflects responsive wrapping behavior.

Changed

• Banner layout and wrapping logic updated:
  • Banner.module.css now uses container queries and more targeted selectors to handle wrapping based on presence/absence of titles and dismiss buttons.
  • Banners with titles always wrap action buttons for better readability.
  • Banners without titles or dismiss buttons now use container queries (plus getContentLength) for responsive wrapping.
• CSS and layout refactoring:
  • Updated Banner.module.css to use container queries instead of broader media queries.
  • Refined selector specificity for more consistent wrapping behavior and button alignment across screen sizes.
• Documentation and Storybook refined to showcase updated wrapping rules across different layouts and screen sizes.

Removed

• Removed older CSS selectors and media query rules that previously controlled wrapping behavior.
• Removed reliance on less specific selectors in Banner.module.css, consolidating layout rules under container query–driven logic.

demo

Screen.Recording.2025-10-08.at.1.43.15.PM.mov

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

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: c2e3524

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

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Patch
@primer/styled-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]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/4118

[primer-integration]

🔴 ci completed with status failure.