From 037d06779353ed40babd490b5f72b458d28c582b Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Thu, 24 Aug 2023 15:59:49 -0600
Subject: [PATCH] Limit the width of alerts on the MR page in fixed-width mode

Changelog: fixed
---
 app/assets/javascripts/merge_request_tabs.js     |  2 ++
 .../stylesheets/page_bundles/merge_requests.scss |  8 ++++++++
 spec/frontend/merge_request_tabs_spec.js         | 16 ++++++++++++++++
 3 files changed, 26 insertions(+)

diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index f0f141c89610c2..9279e7ca935c37 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -579,10 +579,12 @@ export default class MergeRequestTabs {
 
   expandViewContainer() {
     this.contentWrapper.classList.remove('container-limited');
+    this.contentWrapper.classList.add('diffs-container-limited');
   }
 
   resetViewContainer() {
     this.contentWrapper.classList.toggle('container-limited', this.isFixedLayoutPreferred);
+    this.contentWrapper.classList.remove('diffs-container-limited');
   }
 
   // Expand the issuable sidebar unless the user explicitly collapsed it
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 14c23c2b7a9d99..0ab56e35e2dc4c 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -985,6 +985,14 @@ $tabs-holder-z-index: 250;
   }
 }
 
+.container-fluid.diffs-container-limited {
+  .flash-container {
+    @include gl-mx-auto;
+    @include gl-max-w-container-xl;
+    @include gl-px-5;
+  }
+}
+
 .submit-review-dropdown {
   &.show .dropdown-menu {
     width: calc(100vw - 20px);
diff --git a/spec/frontend/merge_request_tabs_spec.js b/spec/frontend/merge_request_tabs_spec.js
index 3b8c9dd3bf31ba..6c4ea7063ad41b 100644
--- a/spec/frontend/merge_request_tabs_spec.js
+++ b/spec/frontend/merge_request_tabs_spec.js
@@ -281,6 +281,14 @@ describe('MergeRequestTabs', () => {
       testContext.class.expandViewContainer();
       expect($('.content-wrapper .container-limited')).toHaveLength(0);
     });
+
+    it('adds the diff-specific width-limiter', () => {
+      testContext.class.expandViewContainer();
+
+      expect(testContext.class.contentWrapper.classList.contains('diffs-container-limited')).toBe(
+        true,
+      );
+    });
   });
 
   describe('resetViewContainer', () => {
@@ -302,6 +310,14 @@ describe('MergeRequestTabs', () => {
 
       expect($('.content-wrapper .container-limited')).toHaveLength(1);
     });
+
+    it('removes the diff-specific width-limiter', () => {
+      testContext.class.resetViewContainer();
+
+      expect(testContext.class.contentWrapper.classList.contains('diffs-container-limited')).toBe(
+        false,
+      );
+    });
   });
 
   describe('tabShown', () => {
-- 
GitLab