Improve MR file tree on small screens

app/assets/javascripts/diffs/store/modules/diff_state.js

 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: '',
 });

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
  */

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;
+    }
+  }
+}

app/assets/stylesheets/pages/issuable.scss

 // 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 {

changelogs/unreleased/52361-fix-file-tree-mobile.yml

+---
+title: Improve MR file tree in smaller screens
+merge_request: 22273
+author:
+type: fixed