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 bb96112bc309..bef901465bf2 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 f53f9f4f5af9..992803fc039f 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 2d4c05f02ac7..6b9176543167 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>
--
GitLab