From fc7bf962e25b8cd22c8cbf062f373eb805553a7b Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Sun, 1 Jun 2025 04:28:13 +0400
Subject: [PATCH 1/4] Move file browser to a drawer on mobile in Rapid Diffs

Show diff view settings and stats on mobile

Add #js-page-breadcrumbs-extra for mounting toggle

Use Pinia for viewport changes
---
 .../diffs/components/diff_app_controls.vue    | 10 ++-
 .../diffs/components/diff_stats.vue           | 11 ++-
 .../diffs/components/file_browser_toggle.vue  |  2 +-
 .../javascripts/diffs/stores/file_browser.js  |  7 ++
 app/assets/javascripts/lib/utils/css_utils.js |  2 +-
 .../pinia/global_stores/viewport.js           | 22 ++++++
 .../rapid_diffs/app/file_browser_drawer.vue   | 73 +++++++++++++++++++
 .../app/file_browser_drawer_toggle.vue        | 36 +++++++++
 .../rapid_diffs/app/init_file_browser.js      | 27 ++++++-
 .../rapid_diffs/app/view_settings.js          |  1 +
 .../components/rapid_diffs/app.scss           |  5 +-
 app/assets/stylesheets/framework/files.scss   |  4 +
 app/views/layouts/application.html.haml       |  2 +
 .../nav/breadcrumbs/_breadcrumbs.html.haml    |  1 +
 locale/gitlab.pot                             |  3 +
 15 files changed, 197 insertions(+), 9 deletions(-)
 create mode 100644 app/assets/javascripts/pinia/global_stores/viewport.js
 create mode 100644 app/assets/javascripts/rapid_diffs/app/file_browser_drawer.vue
 create mode 100644 app/assets/javascripts/rapid_diffs/app/file_browser_drawer_toggle.vue

diff --git a/app/assets/javascripts/diffs/components/diff_app_controls.vue b/app/assets/javascripts/diffs/components/diff_app_controls.vue
index 682c33bf5d1dae..d50649d4dbe2b4 100644
--- a/app/assets/javascripts/diffs/components/diff_app_controls.vue
+++ b/app/assets/javascripts/diffs/components/diff_app_controls.vue
@@ -60,6 +60,11 @@ export default {
       required: false,
       default: true,
     },
+    hideOnNarrowScreen: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     expandButtonInfo() {
@@ -101,14 +106,15 @@ export default {
 </script>
 
 <template>
-  <div class="gl-hidden gl-items-center md:gl-flex">
+  <div class="gl-items-center" :class="hideOnNarrowScreen ? 'gl-hidden md:gl-flex' : 'gl-flex'">
     <template v-if="hasChanges">
       <diff-stats
         v-if="diffsCount !== ''"
-        class="inline-parallel-buttons ml-auto gl-hidden md:gl-flex"
+        class="inline-parallel-buttons ml-auto"
         :diffs-count="diffsCount"
         :added-lines="addedLines"
         :removed-lines="removedLines"
+        :hide-on-narrow-screen="hideOnNarrowScreen"
       />
       <gl-button-group class="gl-mr-3">
         <gl-button
diff --git a/app/assets/javascripts/diffs/components/diff_stats.vue b/app/assets/javascripts/diffs/components/diff_stats.vue
index 376233c0533f07..79e0acec693d7d 100644
--- a/app/assets/javascripts/diffs/components/diff_stats.vue
+++ b/app/assets/javascripts/diffs/components/diff_stats.vue
@@ -25,6 +25,11 @@ export default {
       required: false,
       default: null,
     },
+    hideOnNarrowScreen: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     diffFilesLength() {
@@ -65,8 +70,10 @@ export default {
   <div
     class="diff-stats"
     :class="{
-      'is-compare-versions-header gl-hidden lg:gl-inline-flex': isCompareVersionsHeader,
-      'gl-hidden sm:!gl-inline-flex': !isCompareVersionsHeader,
+      'is-compare-versions-header gl-hidden lg:gl-inline-flex':
+        isCompareVersionsHeader && hideOnNarrowScreen,
+      'gl-hidden sm:!gl-inline-flex': !isCompareVersionsHeader && hideOnNarrowScreen,
+      'gl-inline-flex': !hideOnNarrowScreen,
     }"
   >
     <div v-if="notDiffable" :class="fileStats.classes">
diff --git a/app/assets/javascripts/diffs/components/file_browser_toggle.vue b/app/assets/javascripts/diffs/components/file_browser_toggle.vue
index 6984672fa26548..b823f2a7bc55a3 100644
--- a/app/assets/javascripts/diffs/components/file_browser_toggle.vue
+++ b/app/assets/javascripts/diffs/components/file_browser_toggle.vue
@@ -52,7 +52,7 @@ export default {
   <gl-button
     v-gl-tooltip.html="toggleFileBrowserTooltip"
     variant="default"
-    class="js-toggle-tree-list btn-icon gl-mr-3"
+    class="btn-icon gl-mr-3 max-lg:gl-hidden"
     data-testid="file-tree-button"
     :aria-label="toggleFileBrowserTitle"
     :aria-keyshortcuts="toggleFileBrowserShortcutKey"
diff --git a/app/assets/javascripts/diffs/stores/file_browser.js b/app/assets/javascripts/diffs/stores/file_browser.js
index 8c59f8e2614d47..13a5bcb079012b 100644
--- a/app/assets/javascripts/diffs/stores/file_browser.js
+++ b/app/assets/javascripts/diffs/stores/file_browser.js
@@ -6,12 +6,19 @@ export const useFileBrowser = defineStore('fileBrowser', {
   state() {
     return {
       fileBrowserVisible: true,
+      fileBrowserDrawerVisible: false,
     };
   },
   actions: {
     setFileBrowserVisibility(visible) {
       this.fileBrowserVisible = visible;
     },
+    setFileBrowserDrawerVisibility(visible) {
+      this.fileBrowserDrawerVisible = visible;
+    },
+    toggleFileBrowserDrawerVisibility() {
+      this.fileBrowserDrawerVisible = !this.fileBrowserDrawerVisible;
+    },
     toggleFileBrowserVisibility() {
       this.fileBrowserVisible = !this.fileBrowserVisible;
       setCookie(FILE_BROWSER_VISIBLE, this.fileBrowserVisible);
diff --git a/app/assets/javascripts/lib/utils/css_utils.js b/app/assets/javascripts/lib/utils/css_utils.js
index b9a5a201cc75fa..8a0d9eff1e33dc 100644
--- a/app/assets/javascripts/lib/utils/css_utils.js
+++ b/app/assets/javascripts/lib/utils/css_utils.js
@@ -103,7 +103,7 @@ export function removeListenerSystemColorSchemeChange(onEvent) {
     .removeEventListener('change', (event) => handleColorSchemeChange(onEvent, event));
 }
 
-function isNarrowScreenMediaQuery() {
+export function isNarrowScreenMediaQuery() {
   const computedStyles = getComputedStyle(document.body);
   const largeBreakpointSize = parseInt(computedStyles.getPropertyValue('--breakpoint-lg'), 10);
   return window.matchMedia(`(max-width: ${largeBreakpointSize - 1}px)`);
diff --git a/app/assets/javascripts/pinia/global_stores/viewport.js b/app/assets/javascripts/pinia/global_stores/viewport.js
new file mode 100644
index 00000000000000..f0111942b743ab
--- /dev/null
+++ b/app/assets/javascripts/pinia/global_stores/viewport.js
@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import { isNarrowScreenMediaQuery } from '~/lib/utils/css_utils';
+
+export const useViewport = defineStore('viewportStore', () => {
+  const isNarrowScreen = ref(false);
+
+  const updateIsNarrow = (matches) => {
+    isNarrowScreen.value = matches;
+  };
+
+  const query = isNarrowScreenMediaQuery();
+  updateIsNarrow(query.matches);
+
+  query.addEventListener('change', (event) => {
+    updateIsNarrow(event.matches);
+  });
+
+  return {
+    isNarrowScreen: computed(() => isNarrowScreen.value),
+  };
+});
diff --git a/app/assets/javascripts/rapid_diffs/app/file_browser_drawer.vue b/app/assets/javascripts/rapid_diffs/app/file_browser_drawer.vue
new file mode 100644
index 00000000000000..18e9105d151108
--- /dev/null
+++ b/app/assets/javascripts/rapid_diffs/app/file_browser_drawer.vue
@@ -0,0 +1,73 @@
+<script>
+import { mapState } from 'pinia';
+import { MountingPortal } from 'portal-vue';
+import { GlDrawer } from '@gitlab/ui';
+import DiffsFileTree from '~/diffs/components/diffs_file_tree.vue';
+import { useDiffsList } from '~/rapid_diffs/stores/diffs_list';
+import { useFileBrowser } from '~/diffs/stores/file_browser';
+import { useDiffsView } from '~/rapid_diffs/stores/diffs_view';
+import { useLegacyDiffs } from '~/diffs/stores/legacy_diffs';
+
+export default {
+  name: 'FileBrowserDrawer',
+  components: {
+    MountingPortal,
+    DiffsFileTree,
+    GlDrawer,
+  },
+  props: {
+    groupBlobsListItems: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      openedOnce: false,
+    };
+  },
+  computed: {
+    ...mapState(useDiffsView, ['totalFilesCount']),
+    ...mapState(useDiffsList, ['loadedFiles']),
+    ...mapState(useFileBrowser, ['fileBrowserDrawerVisible']),
+  },
+  watch: {
+    fileBrowserDrawerVisible() {
+      this.openedOnce = true;
+    },
+  },
+  methods: {
+    clickFile(file) {
+      this.$emit('clickFile', file);
+      this.close();
+    },
+    toggleFolder(path) {
+      useLegacyDiffs().toggleTreeOpen(path);
+    },
+    close() {
+      useFileBrowser().setFileBrowserDrawerVisibility(false);
+    },
+  },
+};
+</script>
+
+<template>
+  <mounting-portal append mount-to="#js-drawer-container">
+    <gl-drawer v-show="fileBrowserDrawerVisible" :open="openedOnce" :z-index="9999" @close="close">
+      <template #title>
+        <h2 class="gl-my-0 gl-text-size-h2 gl-leading-24">{{ s__('RapidDiffs|File browser') }}</h2>
+      </template>
+      <template #default>
+        <diffs-file-tree
+          class="diffs-tree-drawer"
+          :loaded-files="loadedFiles"
+          :total-files-count="totalFilesCount"
+          :group-blobs-list-items="groupBlobsListItems"
+          @clickFile="clickFile"
+          @toggleFolder="toggleFolder"
+        />
+      </template>
+    </gl-drawer>
+  </mounting-portal>
+</template>
diff --git a/app/assets/javascripts/rapid_diffs/app/file_browser_drawer_toggle.vue b/app/assets/javascripts/rapid_diffs/app/file_browser_drawer_toggle.vue
new file mode 100644
index 00000000000000..716c32b6ddd957
--- /dev/null
+++ b/app/assets/javascripts/rapid_diffs/app/file_browser_drawer_toggle.vue
@@ -0,0 +1,36 @@
+<script>
+import { GlAnimatedSidebarIcon, GlButton } from '@gitlab/ui';
+import { mapActions, mapState } from 'pinia';
+import { __ } from '~/locale';
+import { useFileBrowser } from '~/diffs/stores/file_browser';
+
+export default {
+  name: 'FileBrowserDrawerToggle',
+  components: {
+    GlButton,
+    GlAnimatedSidebarIcon,
+  },
+  computed: {
+    ...mapState(useFileBrowser, ['fileBrowserDrawerVisible']),
+    toggleFileBrowserTitle() {
+      return this.fileBrowserDrawerVisible ? __('Hide file browser') : __('Show file browser');
+    },
+  },
+  methods: {
+    ...mapActions(useFileBrowser, ['toggleFileBrowserDrawerVisibility']),
+  },
+};
+</script>
+
+<template>
+  <gl-button
+    variant="default"
+    category="tertiary"
+    class="btn-icon -gl-mr-3 -gl-scale-x-100 lg:gl-hidden"
+    :aria-label="toggleFileBrowserTitle"
+    data-testid="file-tree-drawer-button"
+    @click="toggleFileBrowserDrawerVisibility"
+  >
+    <gl-animated-sidebar-icon :is-on="fileBrowserDrawerVisible" class="gl-button-icon" />
+  </gl-button>
+</template>
diff --git a/app/assets/javascripts/rapid_diffs/app/init_file_browser.js b/app/assets/javascripts/rapid_diffs/app/init_file_browser.js
index bda3f82d9857ef..abbba8c22c6dd0 100644
--- a/app/assets/javascripts/rapid_diffs/app/init_file_browser.js
+++ b/app/assets/javascripts/rapid_diffs/app/init_file_browser.js
@@ -7,7 +7,10 @@ import { generateTreeList } from '~/diffs/utils/tree_worker_utils';
 import { SET_TREE_DATA } from '~/diffs/store/mutation_types';
 import { linkTreeNodes, sortTree } from '~/ide/stores/utils';
 import { useLegacyDiffs } from '~/diffs/stores/legacy_diffs';
+import { useViewport } from '~/pinia/global_stores/viewport';
 import FileBrowser from './file_browser.vue';
+import FileBrowserDrawer from './file_browser_drawer.vue';
+import FileBrowserDrawerToggle from './file_browser_drawer_toggle.vue';
 
 const loadFileBrowserData = async (diffFilesEndpoint, shouldSort) => {
   const { data } = await axios.get(diffFilesEndpoint);
@@ -19,11 +22,33 @@ const loadFileBrowserData = async (diffFilesEndpoint, shouldSort) => {
 };
 
 const initToggle = (el) => {
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: document.querySelector('#js-page-breadcrumbs-extra'),
+    pinia,
+    computed: {
+      visible() {
+        return useViewport().isNarrowScreen;
+      },
+    },
+    render(h) {
+      if (!this.visible) return null;
+
+      return h(FileBrowserDrawerToggle);
+    },
+  });
   // eslint-disable-next-line no-new
   new Vue({
     el,
     pinia,
+    computed: {
+      visible() {
+        return !useViewport().isNarrowScreen;
+      },
+    },
     render(h) {
+      if (!this.visible) return null;
+
       return h(FileBrowserToggle);
     },
   });
@@ -35,7 +60,7 @@ const initBrowserComponent = async (el, shouldSort) => {
     el,
     pinia,
     render(h) {
-      return h(FileBrowser, {
+      return h(useViewport().isNarrowScreen ? FileBrowserDrawer : FileBrowser, {
         props: {
           groupBlobsListItems: shouldSort,
         },
diff --git a/app/assets/javascripts/rapid_diffs/app/view_settings.js b/app/assets/javascripts/rapid_diffs/app/view_settings.js
index b2e694c65a2779..745decf78b8d3b 100644
--- a/app/assets/javascripts/rapid_diffs/app/view_settings.js
+++ b/app/assets/javascripts/rapid_diffs/app/view_settings.js
@@ -44,6 +44,7 @@ const initSettingsApp = (el, pinia) => {
           addedLines: this.diffsStats?.addedLines,
           removedLines: this.diffsStats?.removedLines,
           diffsCount: this.diffsStats?.diffsCount,
+          hideOnNarrowScreen: false,
         },
         on: {
           updateDiffViewType: this.updateViewType,
diff --git a/app/assets/stylesheets/components/rapid_diffs/app.scss b/app/assets/stylesheets/components/rapid_diffs/app.scss
index 1e066e7907f84b..ceef1536632ed1 100644
--- a/app/assets/stylesheets/components/rapid_diffs/app.scss
+++ b/app/assets/stylesheets/components/rapid_diffs/app.scss
@@ -84,8 +84,9 @@
     // override .diff-tree-list, remove when fully switched to Rapid Diffs
     width: auto !important;
     position: static !important;
-    padding: 0 0 $gl-spacing-scale-4 !important;
-    min-height: auto !important;
+    padding: $gl-spacing-scale-4 !important;
+    min-height: 0 !important;
+    box-sizing: border-box;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 616c85dfeb23de..69fe643c3de12c 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -454,6 +454,10 @@ span.idiff {
   }
 }
 
+.diffs-tree-drawer .mr-tree-list {
+  max-height: none;
+}
+
 .mr-tree-list:not(.tree-list-blobs) .tree-list-parent::before, .repository-tree-list .tree-list-parent::before {
   content: '';
   position: absolute;
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index f0008ef6177fec..f630ec888eb2df 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -8,6 +8,8 @@
   %body{ class: body_classes, data: body_data }
     -# all tooltips from GitLab UI will mount here by default
     #js-tooltips-container
+    -# mount drawers here for better page performance
+    #js-drawer-container
     = render "layouts/init_auto_complete" if @gfm_form
     = render "layouts/init_client_detection_flags"
     = render 'peek/bar'
diff --git a/app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml b/app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml
index 59702d3b30a036..346245b2dc977f 100644
--- a/app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml
+++ b/app/views/layouts/nav/breadcrumbs/_breadcrumbs.html.haml
@@ -13,5 +13,6 @@
 #js-vue-page-breadcrumbs-wrapper{ data: { testid: 'breadcrumb-links' } }
   #js-vue-page-breadcrumbs{ data: { breadcrumbs_json: breadcrumbs_as_json } }
   #js-injected-page-breadcrumbs
+  #js-page-breadcrumbs-extra
 
 = yield :header_content
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 98b7d0bcc6f518..0b20b3575ba708 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -50448,6 +50448,9 @@ msgstr ""
 msgid "RapidDiffs|Failed to load changes, please try again."
 msgstr ""
 
+msgid "RapidDiffs|File browser"
+msgstr ""
+
 msgid "RapidDiffs|File moved from %{old} to %{new}"
 msgstr ""
 
-- 
GitLab


From 18e2189210fe5c9f5b8dee57099478cce5dc50ba Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Thu, 5 Jun 2025 15:56:34 +0400
Subject: [PATCH 2/4] Hide mobile toggle when Rapid Diffs are hidden

---
 app/assets/javascripts/merge_request_tabs.js          |  3 +++
 app/assets/javascripts/rapid_diffs/app/index.js       | 11 +++++++++++
 .../javascripts/rapid_diffs/app/init_file_browser.js  |  3 ++-
 app/assets/javascripts/rapid_diffs/stores/app.js      |  9 +++++++++
 4 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/rapid_diffs/stores/app.js

diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 30d3c3e2bfd355..b4faf4d05119cf 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -337,6 +337,7 @@ export default class MergeRequestTabs {
       }
 
       this.expandSidebar?.forEach((el) => el.classList.toggle('!gl-hidden', action !== 'show'));
+      this.rapidDiffsApp?.hide?.();
 
       if (action === 'commits') {
         if (!this.commitsLoaded) {
@@ -537,6 +538,8 @@ export default class MergeRequestTabs {
         this.rapidDiffsApp = this.createRapidDiffsApp();
         this.rapidDiffsApp.reloadDiffs(true);
         this.rapidDiffsApp.init();
+      } else {
+        this.rapidDiffsApp.show();
       }
     } else {
       this.loadDiff(options);
diff --git a/app/assets/javascripts/rapid_diffs/app/index.js b/app/assets/javascripts/rapid_diffs/app/index.js
index 646f8c34bfed93..cb70051e86a2f6 100644
--- a/app/assets/javascripts/rapid_diffs/app/index.js
+++ b/app/assets/javascripts/rapid_diffs/app/index.js
@@ -14,6 +14,7 @@ import { DIFF_FILE_MOUNTED } from '~/rapid_diffs/dom_events';
 import { VIEWER_ADAPTERS } from '~/rapid_diffs/adapters';
 import { camelizeKeys } from '~/lib/utils/object_utils';
 import { disableBrokenContentVisibility } from '~/rapid_diffs/app/content_visibility_fix';
+import { useApp } from '~/rapid_diffs/stores/app';
 
 // This facade interface joins together all the bits and pieces of Rapid Diffs: DiffFile, Settings, File browser, etc.
 // It's a unified entrypoint for Rapid Diffs and all external communications should happen through this interface.
@@ -51,6 +52,16 @@ export class RapidDiffsFacade {
     this.intersectionObserver.unobserve(instance);
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  show() {
+    useApp().appVisible = true;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  hide() {
+    useApp().appVisible = false;
+  }
+
   #delegateEvents() {
     this.root.addEventListener('click', (event) => {
       const diffFile = event.target.closest('diff-file');
diff --git a/app/assets/javascripts/rapid_diffs/app/init_file_browser.js b/app/assets/javascripts/rapid_diffs/app/init_file_browser.js
index abbba8c22c6dd0..850de569aab4fc 100644
--- a/app/assets/javascripts/rapid_diffs/app/init_file_browser.js
+++ b/app/assets/javascripts/rapid_diffs/app/init_file_browser.js
@@ -8,6 +8,7 @@ import { SET_TREE_DATA } from '~/diffs/store/mutation_types';
 import { linkTreeNodes, sortTree } from '~/ide/stores/utils';
 import { useLegacyDiffs } from '~/diffs/stores/legacy_diffs';
 import { useViewport } from '~/pinia/global_stores/viewport';
+import { useApp } from '~/rapid_diffs/stores/app';
 import FileBrowser from './file_browser.vue';
 import FileBrowserDrawer from './file_browser_drawer.vue';
 import FileBrowserDrawerToggle from './file_browser_drawer_toggle.vue';
@@ -28,7 +29,7 @@ const initToggle = (el) => {
     pinia,
     computed: {
       visible() {
-        return useViewport().isNarrowScreen;
+        return useViewport().isNarrowScreen && useApp().appVisible;
       },
     },
     render(h) {
diff --git a/app/assets/javascripts/rapid_diffs/stores/app.js b/app/assets/javascripts/rapid_diffs/stores/app.js
new file mode 100644
index 00000000000000..dbe0ae1d54feaf
--- /dev/null
+++ b/app/assets/javascripts/rapid_diffs/stores/app.js
@@ -0,0 +1,9 @@
+import { defineStore } from 'pinia';
+
+export const useApp = defineStore('rapidDiffsApp', {
+  state() {
+    return {
+      appVisible: true,
+    };
+  },
+});
-- 
GitLab


From 6b9322dc92154d8f08b0bad4ab1e05567e828579 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Thu, 5 Jun 2025 18:16:30 +0400
Subject: [PATCH 3/4] Add tests

---
 .../pinia/global_stores/viewport.js           |   8 +
 .../components/diff_app_controls_spec.js      |   1 +
 .../diffs/stores/file_browser_spec.js         |  16 ++
 spec/frontend/merge_request_tabs_spec.js      |  27 ++++
 .../pinia/global_stores/viewport_spec.js      |  50 ++++++
 spec/frontend/rapid_diffs/app/app_spec.js     |  14 ++
 .../app/file_browser_drawer_spec.js           |  68 ++++++++
 .../app/file_browser_drawer_toggle_spec.js    |  31 ++++
 .../rapid_diffs/app/init_file_browser_spec.js | 145 ++++++++++++------
 .../rapid_diffs/app/view_settings_spec.js     |   2 +
 spec/frontend/rapid_diffs/stores/app_spec.js  |  12 ++
 11 files changed, 329 insertions(+), 45 deletions(-)
 create mode 100644 spec/frontend/pinia/global_stores/viewport_spec.js
 create mode 100644 spec/frontend/rapid_diffs/app/file_browser_drawer_spec.js
 create mode 100644 spec/frontend/rapid_diffs/app/file_browser_drawer_toggle_spec.js
 create mode 100644 spec/frontend/rapid_diffs/stores/app_spec.js

diff --git a/app/assets/javascripts/pinia/global_stores/viewport.js b/app/assets/javascripts/pinia/global_stores/viewport.js
index f0111942b743ab..a70942b96064bc 100644
--- a/app/assets/javascripts/pinia/global_stores/viewport.js
+++ b/app/assets/javascripts/pinia/global_stores/viewport.js
@@ -9,6 +9,10 @@ export const useViewport = defineStore('viewportStore', () => {
     isNarrowScreen.value = matches;
   };
 
+  const reset = () => {
+    isNarrowScreen.value = false;
+  };
+
   const query = isNarrowScreenMediaQuery();
   updateIsNarrow(query.matches);
 
@@ -17,6 +21,10 @@ export const useViewport = defineStore('viewportStore', () => {
   });
 
   return {
+    // used only for testing
+    updateIsNarrow,
+    // used only for testing
+    reset,
     isNarrowScreen: computed(() => isNarrowScreen.value),
   };
 });
diff --git a/spec/frontend/diffs/components/diff_app_controls_spec.js b/spec/frontend/diffs/components/diff_app_controls_spec.js
index 859f637d606bf3..a1f0f2d978746e 100644
--- a/spec/frontend/diffs/components/diff_app_controls_spec.js
+++ b/spec/frontend/diffs/components/diff_app_controls_spec.js
@@ -48,6 +48,7 @@ describe('DiffAppControls', () => {
         diffsCount: DEFAULT_PROPS.diffsCount,
         addedLines: DEFAULT_PROPS.addedLines,
         removedLines: DEFAULT_PROPS.removedLines,
+        hideOnNarrowScreen: true,
       });
     });
 
diff --git a/spec/frontend/diffs/stores/file_browser_spec.js b/spec/frontend/diffs/stores/file_browser_spec.js
index df225063cff208..685399989b94ed 100644
--- a/spec/frontend/diffs/stores/file_browser_spec.js
+++ b/spec/frontend/diffs/stores/file_browser_spec.js
@@ -34,4 +34,20 @@ describe('FileBrowser store', () => {
       expect(useFileBrowser().fileBrowserVisible).toBe(false);
     });
   });
+
+  describe('browser drawer visibility', () => {
+    it('is hidden by default', () => {
+      expect(useFileBrowser().fileBrowserDrawerVisible).toBe(false);
+    });
+
+    it('#setFileBrowserDrawerVisibility', () => {
+      useFileBrowser().setFileBrowserDrawerVisibility(true);
+      expect(useFileBrowser().fileBrowserDrawerVisible).toBe(true);
+    });
+
+    it('#toggleFileBrowserDrawerVisibility', () => {
+      useFileBrowser().toggleFileBrowserDrawerVisibility();
+      expect(useFileBrowser().fileBrowserDrawerVisible).toBe(true);
+    });
+  });
 });
diff --git a/spec/frontend/merge_request_tabs_spec.js b/spec/frontend/merge_request_tabs_spec.js
index 05bc1ab5eb8016..3fd1736270f6f4 100644
--- a/spec/frontend/merge_request_tabs_spec.js
+++ b/spec/frontend/merge_request_tabs_spec.js
@@ -459,14 +459,20 @@ describe('MergeRequestTabs', () => {
       describe('Rapid Diffs', () => {
         let createRapidDiffsApp;
         let init;
+        let hide;
+        let show;
         let reloadDiffs;
 
         beforeEach(() => {
           setWindowLocation('https://example.com?rapid_diffs=true');
           reloadDiffs = jest.fn();
           init = jest.fn();
+          hide = jest.fn();
+          show = jest.fn();
           createRapidDiffsApp = jest.fn(() => ({
             init,
+            hide,
+            show,
             reloadDiffs,
           }));
         });
@@ -494,6 +500,27 @@ describe('MergeRequestTabs', () => {
           expect(init).toHaveBeenCalledTimes(1);
           expect(reloadDiffs).toHaveBeenCalledTimes(1);
         });
+
+        it('hides Rapid Diffs', () => {
+          testContext.class = new MergeRequestTabs({
+            stubLocation,
+            createRapidDiffsApp,
+          });
+          testContext.class.tabShown('diffs', 'not-a-vue-page');
+          testContext.class.tabShown('new', 'not-a-vue-page');
+          expect(hide).toHaveBeenCalledTimes(1);
+        });
+
+        it('shows Rapid Diffs', () => {
+          testContext.class = new MergeRequestTabs({
+            stubLocation,
+            createRapidDiffsApp,
+          });
+          testContext.class.tabShown('diffs', 'not-a-vue-page');
+          testContext.class.tabShown('new', 'not-a-vue-page');
+          testContext.class.tabShown('diffs', 'not-a-vue-page');
+          expect(show).toHaveBeenCalledTimes(1);
+        });
       });
     });
   });
diff --git a/spec/frontend/pinia/global_stores/viewport_spec.js b/spec/frontend/pinia/global_stores/viewport_spec.js
new file mode 100644
index 00000000000000..bb210a56b0c972
--- /dev/null
+++ b/spec/frontend/pinia/global_stores/viewport_spec.js
@@ -0,0 +1,50 @@
+import { createTestingPinia } from '@pinia/testing';
+import { useViewport } from '~/pinia/global_stores/viewport';
+import { isNarrowScreenMediaQuery } from '~/lib/utils/css_utils';
+import waitForPromises from 'helpers/wait_for_promises';
+
+jest.mock('~/lib/utils/css_utils');
+
+describe('Viewport store', () => {
+  beforeEach(() => {
+    createTestingPinia({ stubActions: false });
+  });
+
+  describe('isNarrowScreen', () => {
+    let handler;
+
+    const setNarrowScreen = (isNarrow) => {
+      isNarrowScreenMediaQuery.mockReturnValue({
+        matches: isNarrow,
+        addEventListener: jest.fn((_, fn) => {
+          handler = fn;
+        }),
+      });
+    };
+    const triggerChange = (isNarrow) => {
+      handler({ matches: isNarrow });
+    };
+
+    beforeEach(() => {
+      isNarrowScreenMediaQuery.mockReset();
+    });
+
+    it('returns true if screen is narrow', () => {
+      setNarrowScreen(true);
+      expect(useViewport().isNarrowScreen).toBe(true);
+    });
+
+    it('returns false if screen is not narrow', () => {
+      setNarrowScreen(false);
+      expect(useViewport().isNarrowScreen).toBe(false);
+    });
+
+    it('updates value if screen changes', async () => {
+      setNarrowScreen(true);
+      useViewport();
+      triggerChange(false);
+      await waitForPromises();
+      expect(useViewport().isNarrowScreen).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/rapid_diffs/app/app_spec.js b/spec/frontend/rapid_diffs/app/app_spec.js
index 7b1c233a35fca0..a83e68397c5d65 100644
--- a/spec/frontend/rapid_diffs/app/app_spec.js
+++ b/spec/frontend/rapid_diffs/app/app_spec.js
@@ -13,6 +13,7 @@ import { fixWebComponentsStreamingOnSafari } from '~/rapid_diffs/app/safari_fix'
 import { DIFF_FILE_MOUNTED } from '~/rapid_diffs/dom_events';
 import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
 import { disableBrokenContentVisibility } from '~/rapid_diffs/app/content_visibility_fix';
+import { useApp } from '~/rapid_diffs/stores/app';
 
 jest.mock('~/lib/graphql');
 jest.mock('~/awards_handler');
@@ -149,6 +150,19 @@ describe('Rapid Diffs App', () => {
     expect(app.appData.shouldSortMetadataFiles).toBe(false);
   });
 
+  it('hides the app', () => {
+    createApp();
+    app.hide();
+    expect(useApp().appVisible).toBe(false);
+  });
+
+  it('shows the app', () => {
+    createApp();
+    app.hide();
+    app.show();
+    expect(useApp().appVisible).toBe(true);
+  });
+
   it('delegates clicks', () => {
     const onClick = jest.fn();
     createApp();
diff --git a/spec/frontend/rapid_diffs/app/file_browser_drawer_spec.js b/spec/frontend/rapid_diffs/app/file_browser_drawer_spec.js
new file mode 100644
index 00000000000000..293968e0770172
--- /dev/null
+++ b/spec/frontend/rapid_diffs/app/file_browser_drawer_spec.js
@@ -0,0 +1,68 @@
+import { shallowMount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import Vue, { nextTick } from 'vue';
+import { PiniaVuePlugin } from 'pinia';
+import { GlDrawer } from '@gitlab/ui';
+import FileBrowserDrawer from '~/rapid_diffs/app/file_browser_drawer.vue';
+import DiffsFileTree from '~/diffs/components/diffs_file_tree.vue';
+import { useDiffsList } from '~/rapid_diffs/stores/diffs_list';
+import { useFileBrowser } from '~/diffs/stores/file_browser';
+import { useDiffsView } from '~/rapid_diffs/stores/diffs_view';
+import { useLegacyDiffs } from '~/diffs/stores/legacy_diffs';
+
+Vue.use(PiniaVuePlugin);
+
+describe('FileBrowserDrawer', () => {
+  let wrapper;
+  let pinia;
+
+  const createComponent = () => {
+    wrapper = shallowMount(FileBrowserDrawer, {
+      pinia,
+    });
+  };
+
+  beforeEach(() => {
+    pinia = createTestingPinia();
+    useDiffsList();
+    useDiffsView();
+    useFileBrowser();
+  });
+
+  it('passes down props', () => {
+    const loadedFiles = { foo: 1 };
+    const totalFilesCount = 20;
+    useDiffsList().loadedFiles = loadedFiles;
+    useDiffsView().diffsStats = { diffsCount: totalFilesCount };
+    createComponent();
+    const tree = wrapper.findComponent(DiffsFileTree);
+    expect(tree.props('loadedFiles')).toStrictEqual(loadedFiles);
+    expect(tree.props('totalFilesCount')).toStrictEqual(totalFilesCount);
+  });
+
+  it('is hidden by default', () => {
+    createComponent();
+    expect(wrapper.findComponent(GlDrawer).props('open')).toBe(false);
+  });
+
+  it('shows file browser', async () => {
+    createComponent();
+    useFileBrowser().fileBrowserDrawerVisible = true;
+    await nextTick();
+    expect(wrapper.findComponent(GlDrawer).props('open')).toBe(true);
+  });
+
+  it('handles click', async () => {
+    const file = { fileHash: 'foo' };
+    createComponent();
+    await wrapper.findComponent(DiffsFileTree).vm.$emit('clickFile', file);
+    expect(wrapper.emitted('clickFile')).toStrictEqual([[file]]);
+  });
+
+  it('handles toggleFolder', async () => {
+    const path = 'foo';
+    createComponent();
+    await wrapper.findComponent(DiffsFileTree).vm.$emit('toggleFolder', path);
+    expect(useLegacyDiffs().toggleTreeOpen).toHaveBeenCalledWith(path);
+  });
+});
diff --git a/spec/frontend/rapid_diffs/app/file_browser_drawer_toggle_spec.js b/spec/frontend/rapid_diffs/app/file_browser_drawer_toggle_spec.js
new file mode 100644
index 00000000000000..77a4f44868a784
--- /dev/null
+++ b/spec/frontend/rapid_diffs/app/file_browser_drawer_toggle_spec.js
@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import Vue from 'vue';
+import { PiniaVuePlugin } from 'pinia';
+import { GlButton } from '@gitlab/ui';
+import FileBrowserDrawerToggle from '~/rapid_diffs/app/file_browser_drawer_toggle.vue';
+import { useFileBrowser } from '~/diffs/stores/file_browser';
+
+Vue.use(PiniaVuePlugin);
+
+describe('FileBrowserDrawerToggle', () => {
+  let wrapper;
+  let pinia;
+
+  const createComponent = () => {
+    wrapper = shallowMount(FileBrowserDrawerToggle, {
+      pinia,
+    });
+  };
+
+  beforeEach(() => {
+    pinia = createTestingPinia();
+    useFileBrowser();
+  });
+
+  it('toggles file browser drawer', () => {
+    createComponent();
+    wrapper.findComponent(GlButton).vm.$emit('click');
+    expect(useFileBrowser().toggleFileBrowserDrawerVisibility).toHaveBeenCalled();
+  });
+});
diff --git a/spec/frontend/rapid_diffs/app/init_file_browser_spec.js b/spec/frontend/rapid_diffs/app/init_file_browser_spec.js
index 7baaa1ec8fde63..c7d73fad70c4c4 100644
--- a/spec/frontend/rapid_diffs/app/init_file_browser_spec.js
+++ b/spec/frontend/rapid_diffs/app/init_file_browser_spec.js
@@ -1,13 +1,14 @@
 import MockAdapter from 'axios-mock-adapter';
+import { setActivePinia } from 'pinia';
+import { nextTick } from 'vue';
 import axios from '~/lib/utils/axios_utils';
 import { resetHTMLFixture, setHTMLFixture } from 'helpers/fixtures';
 import { initFileBrowser } from '~/rapid_diffs/app/init_file_browser';
-import createEventHub from '~/helpers/event_hub_factory';
-import waitForPromises from 'helpers/wait_for_promises';
 import { DiffFile } from '~/rapid_diffs/diff_file';
 import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
-import store from '~/mr_notes/stores';
-import { SET_TREE_DATA } from '~/diffs/store/mutation_types';
+import { useViewport } from '~/pinia/global_stores/viewport';
+import { pinia } from '~/pinia/instance';
+import { useApp } from '~/rapid_diffs/stores/app';
 
 jest.mock('~/rapid_diffs/app/file_browser.vue', () => ({
   props: jest.requireActual('~/rapid_diffs/app/file_browser.vue').default.props,
@@ -26,6 +27,23 @@ jest.mock('~/rapid_diffs/app/file_browser.vue', () => ({
   },
 }));
 
+jest.mock('~/rapid_diffs/app/file_browser_drawer.vue', () => ({
+  props: jest.requireActual('~/rapid_diffs/app/file_browser_drawer.vue').default.props,
+  render(h) {
+    return h('div', {
+      attrs: {
+        'data-file-browser-drawer-component': true,
+        'data-group-blobs-list-items': JSON.stringify(this.groupBlobsListItems),
+      },
+      on: {
+        click: () => {
+          this.$emit('clickFile', { fileHash: 'first' });
+        },
+      },
+    });
+  },
+}));
+
 jest.mock('~/diffs/components/file_browser_toggle.vue', () => ({
   render(h) {
     return h('div', {
@@ -36,14 +54,28 @@ jest.mock('~/diffs/components/file_browser_toggle.vue', () => ({
   },
 }));
 
+jest.mock('~/rapid_diffs/app/file_browser_drawer_toggle.vue', () => ({
+  render(h) {
+    return h('div', {
+      attrs: {
+        'data-file-browser-drawer-toggle-component': true,
+      },
+    });
+  },
+}));
+
 describe('Init file browser', () => {
   let mockAxios;
-  let commit;
   let appData;
 
   const getFileBrowserTarget = () => document.querySelector('[data-file-browser]');
   const getFileBrowserToggleTarget = () => document.querySelector('[data-file-browser-toggle]');
   const getFileBrowser = () => document.querySelector('[data-file-browser-component]');
+  const getFileBrowserDrawer = () => document.querySelector('[data-file-browser-drawer-component]');
+  const getFileBrowserToggle = () => document.querySelector('[data-file-browser-toggle-component]');
+  const getFileBrowserDrawerToggle = () =>
+    document.querySelector('[data-file-browser-drawer-toggle-component]');
+
   const createDiffFiles = () => [
     {
       conflict_type: null,
@@ -90,20 +122,23 @@ describe('Init file browser', () => {
   };
 
   beforeEach(() => {
+    setActivePinia(pinia);
     initAppData();
-    window.mrTabs = { eventHub: createEventHub() };
+    useViewport().reset();
+    useApp().$reset();
+
     mockAxios = new MockAdapter(axios);
     mockAxios
       .onGet(appData.diffFilesEndpoint)
       .reply(HTTP_STATUS_OK, { diff_files: createDiffFiles() });
-    commit = jest.spyOn(store, 'commit');
-    setHTMLFixture(
-      `
-        <div data-file-browser-toggle></div>
-        <div data-file-browser data-metadata-endpoint="/metadata"></div>
-        <diff-file data-file-data="{}" id="first"><div></div></diff-file>
-      `,
-    );
+
+    setHTMLFixture(`
+      <div id="js-page-breadcrumbs-extra"></div>
+      <div data-file-browser-toggle></div>
+      <div data-file-browser data-metadata-endpoint="/metadata"></div>
+      <diff-file data-file-data="{}" id="first"><div></div></diff-file>
+    `);
+
     DiffFile.getAll().forEach((file) =>
       file.mount({ adapterConfig: {}, appData: {}, unobserve: jest.fn() }),
     );
@@ -117,42 +152,62 @@ describe('Init file browser', () => {
     resetHTMLFixture();
   });
 
-  it('mounts the component', async () => {
-    await init();
-    expect(getFileBrowser()).not.toBe(null);
-  });
+  describe.each`
+    isNarrowScreen | getBrowserElement       | getBrowserToggleElement
+    ${false}       | ${getFileBrowser}       | ${getFileBrowserToggle}
+    ${true}        | ${getFileBrowserDrawer} | ${getFileBrowserDrawerToggle}
+  `(
+    'when narrow screen is $isNarrowScreen',
+    ({ isNarrowScreen, getBrowserElement, getBrowserToggleElement }) => {
+      beforeEach(() => {
+        useViewport().updateIsNarrow(isNarrowScreen);
+      });
+
+      it('mounts the components', async () => {
+        await init();
+
+        expect(getBrowserElement()).not.toBe(null);
+        expect(getBrowserToggleElement()).not.toBe(null);
+      });
+
+      it('handles file clicks', async () => {
+        const selectFile = jest.fn();
+        const spy = jest.spyOn(DiffFile, 'findByFileHash').mockReturnValue({ selectFile });
+
+        await init();
+
+        const fileBrowser = getBrowserElement();
+        fileBrowser.click();
+
+        expect(spy).toHaveBeenCalledWith('first');
+        expect(selectFile).toHaveBeenCalled();
+      });
+
+      it('passes sorting configuration to components', async () => {
+        await init();
+        expect(document.querySelector('[data-group-blobs-list-items="true"]')).not.toBe(null);
+      });
+
+      it('disables sorting when configured', async () => {
+        initAppData({ shouldSortMetadataFiles: false });
+        await init();
+        expect(document.querySelector('[data-group-blobs-list-items="false"]')).not.toBe(null);
+      });
+    },
+  );
 
   it('loads diff files data', async () => {
     await init();
-    expect(commit).toHaveBeenCalledWith(
-      `diffs/${SET_TREE_DATA}`,
-      expect.objectContaining({
-        tree: expect.any(Array),
-        treeEntries: expect.any(Object),
-      }),
-    );
-  });
 
-  it('handles file clicks', async () => {
-    const selectFile = jest.fn();
-    const spy = jest.spyOn(DiffFile, 'findByFileHash').mockReturnValue({ selectFile });
-    init();
-    await waitForPromises();
-    getFileBrowser().click();
-    expect(spy).toHaveBeenCalledWith('first');
-    expect(selectFile).toHaveBeenCalled();
+    expect(mockAxios.history.get).toHaveLength(1);
+    expect(mockAxios.history.get[0].url).toBe('/diff-files-metadata');
   });
 
-  it('shows file browser toggle', async () => {
-    init();
-    await waitForPromises();
-    expect(document.querySelector('[data-file-browser-toggle-component]')).not.toBe(null);
-  });
-
-  it('disables sorting', async () => {
-    initAppData({ shouldSortMetadataFiles: false });
-    init();
-    await waitForPromises();
-    expect(document.querySelector('[data-group-blobs-list-items="false"]')).not.toBe(null);
+  it('hides drawer toggle when app is hidden', async () => {
+    useViewport().updateIsNarrow(true);
+    await init();
+    useApp().appVisible = false;
+    await nextTick();
+    expect(getFileBrowserDrawerToggle()).toBe(null);
   });
 });
diff --git a/spec/frontend/rapid_diffs/app/view_settings_spec.js b/spec/frontend/rapid_diffs/app/view_settings_spec.js
index 27702ea0385530..e2fdc820c031e5 100644
--- a/spec/frontend/rapid_diffs/app/view_settings_spec.js
+++ b/spec/frontend/rapid_diffs/app/view_settings_spec.js
@@ -22,6 +22,7 @@ jest.mock('~/diffs/components/diff_app_controls.vue', () => ({
         'data-removed-lines': JSON.stringify(this.removedLines),
         'data-diffs-count': JSON.stringify(this.diffsCount),
         'data-file-by-file-supported': JSON.stringify(this.fileByFileSupported),
+        'data-hide-on-narrow-screen': JSON.stringify(this.hideOnNarrowScreen),
       },
     });
   },
@@ -95,6 +96,7 @@ describe('View settings', () => {
     expect(getProp('removedLines')).toBe(2);
     expect(getProp('diffsCount')).toBe(3);
     expect(getProp('fileByFileSupported')).toBe(false);
+    expect(getProp('hideOnNarrowScreen')).toBe(false);
   });
 
   it('triggers collapse all files', () => {
diff --git a/spec/frontend/rapid_diffs/stores/app_spec.js b/spec/frontend/rapid_diffs/stores/app_spec.js
new file mode 100644
index 00000000000000..2f65e1050e5029
--- /dev/null
+++ b/spec/frontend/rapid_diffs/stores/app_spec.js
@@ -0,0 +1,12 @@
+import { createTestingPinia } from '@pinia/testing';
+import { useApp } from '~/rapid_diffs/stores/app';
+
+describe('rapidDiffsApp store', () => {
+  beforeEach(() => {
+    createTestingPinia({ stubActions: false });
+  });
+
+  it('is visible by default', () => {
+    expect(useApp().appVisible).toBe(true);
+  });
+});
-- 
GitLab


From f2d0a0e3e994d542e8603adec87b8c70a4569fed Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Wed, 11 Jun 2025 18:00:51 +0400
Subject: [PATCH 4/4] Hide loading state on non-desktop viewports

Ensure drawer state is updated when resizing viewport
---
 .../rapid_diffs/app/file_browser_drawer.vue          | 12 +++++++++++-
 .../stylesheets/components/rapid_diffs/app.scss      |  6 ++++++
 .../rapid_diffs/app/file_browser_drawer_spec.js      |  7 +++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/rapid_diffs/app/file_browser_drawer.vue b/app/assets/javascripts/rapid_diffs/app/file_browser_drawer.vue
index 18e9105d151108..e202e1844eae02 100644
--- a/app/assets/javascripts/rapid_diffs/app/file_browser_drawer.vue
+++ b/app/assets/javascripts/rapid_diffs/app/file_browser_drawer.vue
@@ -7,9 +7,11 @@ import { useDiffsList } from '~/rapid_diffs/stores/diffs_list';
 import { useFileBrowser } from '~/diffs/stores/file_browser';
 import { useDiffsView } from '~/rapid_diffs/stores/diffs_view';
 import { useLegacyDiffs } from '~/diffs/stores/legacy_diffs';
+import { DRAWER_Z_INDEX } from '~/lib/utils/constants';
 
 export default {
   name: 'FileBrowserDrawer',
+  DRAWER_Z_INDEX,
   components: {
     MountingPortal,
     DiffsFileTree,
@@ -37,6 +39,9 @@ export default {
       this.openedOnce = true;
     },
   },
+  beforeDestroy() {
+    useFileBrowser().setFileBrowserDrawerVisibility(false);
+  },
   methods: {
     clickFile(file) {
       this.$emit('clickFile', file);
@@ -54,7 +59,12 @@ export default {
 
 <template>
   <mounting-portal append mount-to="#js-drawer-container">
-    <gl-drawer v-show="fileBrowserDrawerVisible" :open="openedOnce" :z-index="9999" @close="close">
+    <gl-drawer
+      v-show="fileBrowserDrawerVisible"
+      :open="openedOnce"
+      :z-index="$options.DRAWER_Z_INDEX"
+      @close="close"
+    >
       <template #title>
         <h2 class="gl-my-0 gl-text-size-h2 gl-leading-24">{{ s__('RapidDiffs|File browser') }}</h2>
       </template>
diff --git a/app/assets/stylesheets/components/rapid_diffs/app.scss b/app/assets/stylesheets/components/rapid_diffs/app.scss
index ceef1536632ed1..031328868a702d 100644
--- a/app/assets/stylesheets/components/rapid_diffs/app.scss
+++ b/app/assets/stylesheets/components/rapid_diffs/app.scss
@@ -90,6 +90,12 @@
   }
 }
 
+.rd-app .rd-app-sidebar {
+  @include media-breakpoint-down(constants.$app-vertical-breakpoint) {
+    display: none;
+  }
+}
+
 .rd-app-sidebar-loading {
   display: flex;
   justify-content: center;
diff --git a/spec/frontend/rapid_diffs/app/file_browser_drawer_spec.js b/spec/frontend/rapid_diffs/app/file_browser_drawer_spec.js
index 293968e0770172..c68119fa4ee9b4 100644
--- a/spec/frontend/rapid_diffs/app/file_browser_drawer_spec.js
+++ b/spec/frontend/rapid_diffs/app/file_browser_drawer_spec.js
@@ -57,6 +57,13 @@ describe('FileBrowserDrawer', () => {
     createComponent();
     await wrapper.findComponent(DiffsFileTree).vm.$emit('clickFile', file);
     expect(wrapper.emitted('clickFile')).toStrictEqual([[file]]);
+    expect(useFileBrowser().setFileBrowserDrawerVisibility).toHaveBeenCalledWith(false);
+  });
+
+  it('updates state on destroy', () => {
+    createComponent();
+    wrapper.destroy();
+    expect(useFileBrowser().setFileBrowserDrawerVisibility).toHaveBeenCalledWith(false);
   });
 
   it('handles toggleFolder', async () => {
-- 
GitLab