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: 2ea447c

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!

[Copilot]

Pull Request Overview

This PR improves the Banner component's wrapping behavior by implementing content-length-based logic and CSS container queries to better handle action button layout across different screen sizes and content scenarios.

Key changes:

• Added getContentLength function to determine wrapping behavior based on content length
• Replaced media queries with container queries for more precise responsive control
• Introduced separate wrapping logic for banners with/without titles and dismiss buttons

Reviewed Changes

Copilot reviewed 6 out of 51 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
Banner.tsx	Added getContentLength function and data attribute for content-based wrapping
Banner.module.css	Replaced media queries with container queries and refined selector specificity
Banner.features.stories.tsx	Split existing story into short/long variants and added new short content story
Banner.docs.json	Updated story references to match new story names
Banner.test.ts	Updated test references and added new test for short content variant
.changeset/lemon-islands-fold.md	Added changelog entry documenting the wrapping behavior improvements

[primer-integration]

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

[primer-integration]

🟢 ci completed with status success.

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!