Apply same container width for all helpdesk pages

cconard96 · Dec 20, 2024 · 5ed9f50 · 5ed9f50
1 parent 122be4b
commit 5ed9f50
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/css/includes/components/_utils.scss b/css/includes/components/_utils.scss
@@ -54,3 +54,8 @@
 .w-fit-content {
     width: fit-content !important;
 }
+
+.force-full-width {
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+}
diff --git a/templates/layout/parts/page_header.html.twig b/templates/layout/parts/page_header.html.twig
@@ -143,5 +143,5 @@
       {% endif %}
 
       <div class="page-wrapper mb-0">
-         <div class="page-body container-fluid">
+         <div class="page-body container-fluid {{ is_helpdesk ? 'container-xl' : '' }}">
             <main role="main" id="page" class="legacy">
diff --git a/templates/pages/helpdesk/index.html.twig b/templates/pages/helpdesk/index.html.twig
@@ -34,7 +34,10 @@
 {% extends "layout/page_skeleton.html.twig" %}
 
 {% block content %}
-    <div class="d-flex flex-column helpdesk-home-container">
+    {# We override the parent width using .force-full-width because we need our background images and colors to bleed
+       through and use all the available width. The content is still using the correct width by redefining manually the
+       container size for each sections of the page using container-xl/container-narrow classes#}
+    <div class="d-flex flex-column helpdesk-home-container force-full-width">
         <div class="search-banner">
             <div class="container-narrow">
                 <h1 class="text-dark text-center">