From 5ed9f5093f3971515565f7fef4e29cefd22b6736 Mon Sep 17 00:00:00 2001
From: Adrien Clairembault
 <42734840+AdrienClairembault@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:34:23 +0100
Subject: [PATCH] Apply same container width for all helpdesk pages

---
 css/includes/components/_utils.scss          | 5 +++++
 templates/layout/parts/page_header.html.twig | 2 +-
 templates/pages/helpdesk/index.html.twig     | 5 ++++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/css/includes/components/_utils.scss b/css/includes/components/_utils.scss
index 04355a82d65..08fbdfe9dfb 100644
--- 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
index ae2d6d5a6f3..b86890b535c 100644
--- 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
index cbc3492c080..67e6db03eda 100644
--- 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">