From 21ef7ddb3077cd7c48ecdd06a755c3dafa582254 Mon Sep 17 00:00:00 2001
From: nod_ <nod_@598310.no-reply.drupal.org>
Date: Tue, 27 Feb 2024 17:27:24 +0100
Subject: [PATCH] Issue #3397532 by finnsky, smustgrave, markconroy: Fix Umami
 container max-width when toolbar or navigation expanded

(cherry picked from commit 16b96ada26a829812185b0f46c625dcf3b525ca5)
---
 .../css/components/blocks/banner/banner.css   |  1 -
 .../themes/umami/css/layout/layout.css        |  3 +-
 .../block--bundle--banner-block.html.twig     | 30 ++++++++++---------
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
index bb96112bc30..bef901465bf 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/banner/banner.css
+++ b/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%;
diff --git a/core/profiles/demo_umami/themes/umami/css/layout/layout.css b/core/profiles/demo_umami/themes/umami/css/layout/layout.css
index f53f9f4f5af..992803fc039 100644
--- a/core/profiles/demo_umami/themes/umami/css/layout/layout.css
+++ b/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%;
diff --git a/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig
index 2d4c05f02ac..6b917654316 100644
--- a/core/profiles/demo_umami/themes/umami/templates/components/banner-block/block--bundle--banner-block.html.twig
+++ b/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>