Merge branch '254197-merge-request-diff-has-an-extra-spacing-on-mobile' into 'master'

Eliminate extra spacing on MR diffs from mobile/tablet screen

Closes #254197

See merge request gitlab-org/gitlab!42821

app/assets/javascripts/diffs/components/app.vue

@@ -474,7 +474,7 @@ export default {
         <div
           v-if="showTreeList"
           :style="{ width: `${treeWidth}px` }"
-          class="diff-tree-list js-diff-tree-list mr-3"
+          class="diff-tree-list js-diff-tree-list px-3 pr-md-0"
         >
           <panel-resizer
             :size.sync="treeWidth"
@@ -487,7 +487,7 @@ export default {
           <tree-list :hide-file-stats="hideFileStats" />
         </div>
         <div
-          class="diff-files-holder"
+          class="col-12 col-md-auto diff-files-holder"
           :class="{
             [CENTERED_LIMITED_CONTAINER_CLASSES]: isLimitedContainer,
           }"

app/assets/javascripts/diffs/components/collapsed_files_warning.vue

@@ -50,7 +50,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="!isDismissed" data-testid="root" :class="containerClasses">
+  <div v-if="!isDismissed" data-testid="root" :class="containerClasses" class="col-12">
     <gl-alert
       :dismissible="true"
       :title="__('Some changes are not shown')"

app/assets/stylesheets/pages/merge_requests.scss

@@ -770,8 +770,6 @@ $mr-widget-min-height: 69px;
     position: -webkit-sticky;
     position: sticky;
     top: $header-height + $mr-tabs-height;
-    margin-left: -16px;
-    width: calc(100% + 32px);
 
     .mr-version-menus-container {
       flex-wrap: nowrap;
@@ -868,6 +866,13 @@ $mr-widget-min-height: 69px;
   }
 }
 
+.container-fluid {
+  // Negative margins for mobile/tablet screen
+  .diffs.tab-pane {
+    margin: 0 (-$gl-padding);
+  }
+}
+
 // Wrap MR tabs/buttons so you don't have to scroll on desktop
 @include media-breakpoint-down(md) {
   .merge-request-tabs-container,

changelogs/unreleased/254197-merge-request-diff-has-an-extra-spacing-on-mobile.yml

+---
+title: Eliminate extra spacing on MR diffs from mobile/tablet screen
+merge_request: 42821
+author: Takuya Noguchi
+type: fixed

spec/frontend/diffs/components/collapsed_files_warning_spec.js

@@ -50,7 +50,7 @@ describe('CollapsedFilesWarning', () => {
     ({ limited, containerClasses }) => {
       createComponent({ limited });
 
-      expect(wrapper.classes()).toEqual(containerClasses);
+      expect(wrapper.classes()).toEqual(['col-12'].concat(containerClasses));
     },
   );