diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js index f0f141c89610c25bd5be7fffc5bff59ee4cf9925..9279e7ca935c3733a0f033a65f1811a958b7337a 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 14c23c2b7a9d99c58d1c9d186e85dab039f9cca9..0ab56e35e2dc4c629af0410311e408f4b4ed537b 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 3b8c9dd3bf31ba28f34a5b314c5c2fdb43ddf768..6c4ea7063ad41bcb7ef4a07854f6237501ee3fdf 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', () => {