From 442ecfe331760321362f7e01caf562f0ce351298 Mon Sep 17 00:00:00 2001
From: Takuya Noguchi <takninnovationresearch@gmail.com>
Date: Mon, 21 Sep 2020 11:03:08 +0000
Subject: [PATCH] Eliminate extra spacing on MR diffs from mobile/tablet screen

Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>
---
 app/assets/javascripts/diffs/components/app.vue          | 4 ++--
 .../diffs/components/collapsed_files_warning.vue         | 2 +-
 app/assets/stylesheets/pages/merge_requests.scss         | 9 +++++++--
 ...merge-request-diff-has-an-extra-spacing-on-mobile.yml | 5 +++++
 .../diffs/components/collapsed_files_warning_spec.js     | 2 +-
 5 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 changelogs/unreleased/254197-merge-request-diff-has-an-extra-spacing-on-mobile.yml

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index dd5addbf1e3361..085f951147f8ca 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/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,
           }"
diff --git a/app/assets/javascripts/diffs/components/collapsed_files_warning.vue b/app/assets/javascripts/diffs/components/collapsed_files_warning.vue
index dded36431153c5..270bbfb99b72b5 100644
--- a/app/assets/javascripts/diffs/components/collapsed_files_warning.vue
+++ b/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')"
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 8aaeb92eb7a98a..ddec04b1b0c7aa 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/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,
diff --git a/changelogs/unreleased/254197-merge-request-diff-has-an-extra-spacing-on-mobile.yml b/changelogs/unreleased/254197-merge-request-diff-has-an-extra-spacing-on-mobile.yml
new file mode 100644
index 00000000000000..02cf7dbea4997f
--- /dev/null
+++ b/changelogs/unreleased/254197-merge-request-diff-has-an-extra-spacing-on-mobile.yml
@@ -0,0 +1,5 @@
+---
+title: Eliminate extra spacing on MR diffs from mobile/tablet screen
+merge_request: 42821
+author: Takuya Noguchi
+type: fixed
diff --git a/spec/frontend/diffs/components/collapsed_files_warning_spec.js b/spec/frontend/diffs/components/collapsed_files_warning_spec.js
index 670eab5472f95c..7bbffb7a1cd4ad 100644
--- a/spec/frontend/diffs/components/collapsed_files_warning_spec.js
+++ b/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));
     },
   );
 
-- 
GitLab