From 52cf955b898ce53d76bf0da83a36bb2579986e5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Lu=C3=ADs?= <aluis@gitlab.com>
Date: Wed, 10 Oct 2018 17:53:17 +0100
Subject: Improve MR file tree on small screens

---
 app/assets/javascripts/diffs/store/modules/diff_state.js |  4 +++-
 app/assets/stylesheets/framework/mixins.scss             |  9 +++++++++
 app/assets/stylesheets/pages/diff.scss                   | 16 ++++++++++++++++
 app/assets/stylesheets/pages/issuable.scss               |  4 +---
 changelogs/unreleased/52361-fix-file-tree-mobile.yml     |  5 +++++
 5 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 changelogs/unreleased/52361-fix-file-tree-mobile.yml

diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index ae8930c8968..1c5c35071de 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -1,5 +1,6 @@
 import Cookies from 'js-cookie';
 import { getParameterValues } from '~/lib/utils/url_utility';
+import bp from '~/breakpoints';
 import { INLINE_DIFF_VIEW_TYPE, DIFF_VIEW_COOKIE_NAME, MR_TREE_SHOW_KEY } from '../../constants';
 
 const viewTypeFromQueryString = getParameterValues('view')[0];
@@ -20,6 +21,7 @@ export default () => ({
   diffViewType: viewTypeFromQueryString || viewTypeFromCookie || defaultViewType,
   tree: [],
   treeEntries: {},
-  showTreeList: storedTreeShow === null ? true : storedTreeShow === 'true',
+  showTreeList:
+    storedTreeShow === null ? bp.getBreakpointSize() !== 'xs' : storedTreeShow === 'true',
   currentDiffFileId: '',
 });
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index be41dbfc61f..1c84baf68ed 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -12,6 +12,15 @@
   max-width: $max-width;
 }
 
+/**
+ * Mixin for fixed width container
+ */
+@mixin fixed-width-container {
+  max-width: $limited-layout-width - ($gl-padding * 2);
+  margin-left: auto;
+  margin-right: auto;
+}
+
 /*
  * Mixin for markdown tables
  */
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 17b02c6e31e..cba5324ce53 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -1046,3 +1046,19 @@
   left: auto;
   line-height: 0;
 }
+
+@media (max-width: map-get($grid-breakpoints, md)-1) {
+  .diffs .files {
+    @include fixed-width-container;
+    flex-direction: column;
+
+    .diff-tree-list {
+      width: 100%;
+    }
+
+    .tree-list-holder {
+      max-height: calc(50px + 50vh);
+      padding-right: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 62a9f97caa9..00b06aea898 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -1,8 +1,6 @@
 // Limit MR description for side-by-side diff view
 .fixed-width-container {
-  max-width: $limited-layout-width - ($gl-padding * 2);
-  margin-left: auto;
-  margin-right: auto;
+  @include fixed-width-container;
 }
 
 .issuable-warning-icon {
diff --git a/changelogs/unreleased/52361-fix-file-tree-mobile.yml b/changelogs/unreleased/52361-fix-file-tree-mobile.yml
new file mode 100644
index 00000000000..fe978eeca2d
--- /dev/null
+++ b/changelogs/unreleased/52361-fix-file-tree-mobile.yml
@@ -0,0 +1,5 @@
+---
+title: Improve MR file tree in smaller screens
+merge_request: 22273
+author:
+type: fixed
-- 
cgit v1.2.1