Merge branch 'fix/limit-flash-notice-width' into 'master'

Limit flash notice width for fixed layout and improve spacing for fluid layout

Closes #32868

See merge request gitlab-org/gitlab-ce!16482

4 files changed, 10 insertions, 9 deletions

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index a29de9ae899..a6ab614df16 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -30,12 +30,12 @@ const createAction = config => `
   </a>
 `;
 
-const createFlashEl = (message, type, isInContentWrapper = false) => `
+const createFlashEl = (message, type, isFixedLayout = false) => `
   <div
     class="flash-${type}"
   >
     <div
-      class="flash-text ${isInContentWrapper ? 'container-fluid container-limited' : ''}"
+      class="flash-text ${isFixedLayout ? 'container-fluid container-limited limit-container-width' : ''}"
     >
       ${_.escape(message)}
     </div>
@@ -69,12 +69,13 @@ const createFlash = function createFlash(
   addBodyClass = false,
 ) {
   const flashContainer = parent.querySelector('.flash-container');
+  const navigation = parent.querySelector('.content');
 
   if (!flashContainer) return null;
 
-  const isInContentWrapper = flashContainer.parentNode.classList.contains('content-wrapper');
+  const isFixedLayout = navigation ? navigation.parentNode.classList.contains('container-limited') : true;
 
-  flashContainer.innerHTML = createFlashEl(message, type, isInContentWrapper);
+  flashContainer.innerHTML = createFlashEl(message, type, isFixedLayout);
 
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
   removeFlashClickListener(flashEl, fadeTransition);
diff --git a/app/views/layouts/_flash.html.haml b/app/views/layouts/_flash.html.haml
index 8bd5708d490..2cdaa85bdaa 100644
--- a/app/views/layouts/_flash.html.haml
+++ b/app/views/layouts/_flash.html.haml
@@ -6,5 +6,5 @@
     -# Don't show a flash message if the message is nil
     - if value
       %div{ class: "flash-#{key}" }
-        %div{ class: "#{container_class} #{extra_flash_class}" }
+        %div{ class: "#{(container_class unless fluid_layout)} #{(extra_flash_class unless @no_container)} #{@content_class}" }
           %span= value
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 1420b0a4973..1b2a4cd6780 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -6,12 +6,12 @@
     .mobile-overlay
     .alert-wrapper
       = render "layouts/broadcast"
-      = render 'layouts/header/read_only_banner'
+      = render "layouts/header/read_only_banner"
       = yield :flash_message
       = render "shared/ping_consent"
       - unless @hide_breadcrumbs
         = render "layouts/nav/breadcrumbs"
-      = render "layouts/flash"
+      = render "layouts/flash", extra_flash_class: 'limit-container-width'
       .d-flex
     %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
       .content{ id: "content-body" }
diff --git a/spec/javascripts/flash_spec.js b/spec/javascripts/flash_spec.js
index d7338ee0f66..aecab331ead 100644
--- a/spec/javascripts/flash_spec.js
+++ b/spec/javascripts/flash_spec.js
@@ -172,7 +172,7 @@ describe('Flash', () => {
         flash('test');
 
         expect(document.querySelector('.flash-text').className).toBe(
-          'flash-text container-fluid container-limited',
+          'flash-text container-fluid container-limited limit-container-width',
         );
       });
 
@@ -180,7 +180,7 @@ describe('Flash', () => {
         document.querySelector('.content-wrapper').className = 'js-content-wrapper';
         flash('test');
 
-        expect(document.querySelector('.flash-text').className.trim()).toBe('flash-text');
+        expect(document.querySelector('.flash-text').className.trim()).toContain('flash-text');
       });
 
       it('removes element after clicking', () => {