Merge pull request #423 from opf/feature/72657-move-banners-to-bottom-right-of-the-screen-so-it-does-not-block-important-content

[72657] Improve responsiveness of Banner component

Author: HDinger

.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

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/text_area/with_character_limit_over_limit/dark_colorblind.png

@@ -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';