opf · HDinger · Mar 11, 2026 · Mar 9, 2026 · Mar 11, 2026 · myabc
diff --git a/.changeset/ripe-bananas-cut.md b/.changeset/ripe-bananas-cut.md
@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Let Banner component react on container size instead of screen size
diff --git a/...hots/primer/alpha/text_area/with_character_limit_over_limit/dark_colorblind.png b/...hots/primer/alpha/text_area/with_character_limit_over_limit/dark_colorblind.png
diff --git a/...s/primer/alpha/text_area/with_character_limit_over_limit/dark_high_contrast.png b/...s/primer/alpha/text_area/with_character_limit_over_limit/dark_high_contrast.png
diff --git a/.../primer/alpha/text_area/with_character_limit_over_limit/light_high_contrast.png b/.../primer/alpha/text_area/with_character_limit_over_limit/light_high_contrast.png
diff --git a/...ots/primer/alpha/text_field/with_character_limit_over_limit/dark_colorblind.png b/...ots/primer/alpha/text_field/with_character_limit_over_limit/dark_colorblind.png
diff --git a/....ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/light.png b/....ts-snapshots/primer/alpha/text_field/with_character_limit_over_limit/light.png
diff --git a/...ts/primer/alpha/text_field/with_character_limit_over_limit/light_colorblind.png b/...ts/primer/alpha/text_field/with_character_limit_over_limit/light_colorblind.png
diff --git a/app/components/primer/alpha/banner.pcss b/app/components/primer/alpha/banner.pcss
@@ -1,4 +1,8 @@
 /* Banner alert */
+x-banner {
+  container-type: inline-size;
+  display: block;
+}
 
 .Banner {
   position: relative;
@@ -14,7 +18,7 @@
   grid-template-rows: min-content;
 
   /* `sm` breakpoint variation */
-  @media (max-width: 543.98px) {
+  @container (max-width: 543.98px) {
     grid-template-areas:
       'visual message close'
       '. actions actions';