Issue #3397532 by finnsky, smustgrave, markconroy: Fix Umami container max-width when toolbar or navigation expanded

(cherry picked from commit 16b96ada26)

core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css

@@ -50,7 +50,6 @@
   .banner-block__inner {
     display: flex;
     align-items: center;
-    max-width: 1200px;
     min-height: 54vw;
     margin: auto;
     padding: 0 4%;

core/profiles/demo_umami/themes/umami/css/layout/layout.css

@@ -7,9 +7,10 @@
  */
 
 .container {
-  max-width: 1200px;
+  max-width: min(calc(100vw - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px) - 2rem), 1200px);
   margin: auto;
 }
+
 /* Add responsive side gutters to the outer layout container 'main' at smaller sizes */
 .main {
   padding: 0 4%;

core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig

@@ -36,19 +36,21 @@
 %}
 
 <div{{ attributes.addClass(classes) }}>
-  <div class="banner-block__inner">
-    {{ title_prefix }}
-    {% if label %}
-      <h2{{ title_attributes }}>{{ label }}</h2>
-    {% endif %}
-    {{ title_suffix }}
-    {% block content %}
-      <div class="banner-block__image">
-        {{ content.field_media_image }}
-      </div>
-      <div class="banner-block__content">
-        {{ content|without('field_media_image') }}
-      </div>
-    {% endblock %}
+  <div class="container">
+    <div class="banner-block__inner">
+      {{ title_prefix }}
+      {% if label %}
+        <h2{{ title_attributes }}>{{ label }}</h2>
+      {% endif %}
+      {{ title_suffix }}
+      {% block content %}
+        <div class="banner-block__image">
+          {{ content.field_media_image }}
+        </div>
+        <div class="banner-block__content">
+          {{ content|without('field_media_image') }}
+        </div>
+      {% endblock %}
+    </div>
   </div>
 </div>