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

1 files changed, 5 insertions, 4 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);