improve banner wrapping behavior

.changeset/cold-papers-say.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+changed some CSS to improve the wrapping behavior of the banner component

e2e/components/Banner.test.ts

@@ -47,8 +47,8 @@ const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof
     id: 'components-banner-features--with-hidden-title',
   },
   {
-    title: 'WithHiddenTitleAndActions',
-    id: 'components-banner-features--with-hidden-title-and-actions',
+    title: 'WithHiddenTitleAndActionsLong',
+    id: 'components-banner-features--with-hidden-title-and-actions-long',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
   {
@@ -70,6 +70,11 @@ const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof
     id: 'components-banner-examples--multiline',
     viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
   },
+  {
+    title: 'WithHiddenTitleAndActionsShort',
+    id: 'components-banner-features--with-hidden-title-and-actions-short',
+    viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
+  },
 ]
 
 test.describe('Banner', () => {

packages/react/src/Banner/Banner.docs.json

@@ -33,7 +33,10 @@
   "id": "components-banner-features--with-hidden-title"
     },
     {
-  "id": "components-banner-features--with-hidden-title-and-actions"
+  "id": "components-banner-features--with-hidden-title-and-actions-short"
+    },
+    {
+  "id": "components-banner-features--with-hidden-title-and-actions-long"
     },
     {
   "id": "components-banner-features--dismissible-with-hidden-title-and-actions"

packages/react/src/Banner/Banner.features.stories.tsx

@@ -162,7 +162,7 @@ export const WithHiddenTitle = () => {
   )
 }
 
-export const WithHiddenTitleAndActions = () => {
+export const WithHiddenTitleAndActionsLong = () => {
   return (
     <Banner
       title="Warning"
@@ -205,6 +205,18 @@ export const DismissibleWithHiddenTitleAndActions = () => {
   )
 }
 
+export const WithHiddenTitleAndActionsShort = () => {
+  return (
+    <Banner
+      title="Warning"
+      hideTitle
+      description={<>A short message that does not wrap.</>}
+      variant="warning"
+      primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}
+    />
+  )
+}
+
 export const DismissibleWithHiddenTitleAndSecondaryAction = () => {
   return (
     <Banner

packages/react/src/Banner/Banner.module.css

@@ -62,6 +62,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  align-items: flex-start;
 }
 
 .Banner[data-dismissible]:not([data-title-hidden='']) .BannerContainer {
@@ -75,18 +76,19 @@
 .BannerContent {
   display: grid;
   row-gap: var(--base-size-4);
-  grid-column-start: 1;
   margin-block: var(--base-size-8);
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: max-content;
 }
 
 .Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerContent {
   margin-block: var(--base-size-6);
 }
 
-@media screen and (min-width: 544px) {
-  .BannerContent {
-    flex: 1 1 0%;
-  }
+.Banner :where(.BannerContainer) .BannerContent:has(.BannerTitle + *) {
+  max-width: none;
+  flex: 1 1 250px;
 }
 
 .BannerTitle {
@@ -142,10 +144,7 @@
   column-gap: var(--base-size-12);
   align-items: center;
   margin-block: var(--base-size-2);
-}
-
-.BannerActions :where([data-primary-action='trailing']) {
-  display: none;
+  flex-shrink: 0;
 }
 
 @media screen and (--viewportRange-regular) {
@@ -174,13 +173,15 @@
 
 /* Layout ------------------------------------------------------------------- */
 
-@container banner (max-width: 500px) {
-  .BannerContainer {
+@container banner (max-width: 499px) {
+  .BannerContainer:has(.BannerActionsContainer) {
     display: grid;
+    grid-template-rows: auto auto;
   }
 
-  .BannerContainer:has(.BannerActionsContainer) {
-    grid-template-rows: auto auto;
+  .BannerContainer:has(.BannerTitle):not(:has(.BannerTitle + *)):has(.BannerActionsContainer) {
+    display: flex;
+    flex-wrap: wrap;
   }
 
   .BannerActions {
@@ -196,10 +197,11 @@
   }
 }
 
-@container banner (min-width: 500px) {
+@container banner (min-width: 500.01px) {
   .BannerContainer {
     display: grid;
     grid-template-columns: auto auto;
+    column-gap: var(--base-size-6);
   }
 
   :where(.Banner):not([data-dismissible])