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