Set the issuable sidebar to remain collapsed on mobile devices

4 files changed, 30 insertions, 0 deletions

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 36616d02bf6..be3c2c9fbb1 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -211,6 +211,14 @@ $(function () {
     }
   });
 
+  if (bootstrapBreakpoint === 'xs') {
+    const $rightSidebar = $('aside.right-sidebar, .page-with-sidebar');
+
+    $rightSidebar
+      .removeClass('right-sidebar-expanded')
+      .addClass('right-sidebar-collapsed');
+  }
+
   // prevent default action for disabled buttons
   $('.btn').click(function(e) {
     if ($(this).hasClass('disabled')) {
diff --git a/changelogs/unreleased/right-sidebar-closed-default-mobile.yml b/changelogs/unreleased/right-sidebar-closed-default-mobile.yml
new file mode 100644
index 00000000000..cf0ec418f0e
--- /dev/null
+++ b/changelogs/unreleased/right-sidebar-closed-default-mobile.yml
@@ -0,0 +1,4 @@
+---
+title: Set the issuable sidebar to remain closed for mobile devices
+merge_request:
+author:
diff --git a/spec/features/issues/issue_sidebar_spec.rb b/spec/features/issues/issue_sidebar_spec.rb
index 7b9d4534ada..85585587fb1 100644
--- a/spec/features/issues/issue_sidebar_spec.rb
+++ b/spec/features/issues/issue_sidebar_spec.rb
@@ -120,6 +120,20 @@ feature 'Issue Sidebar', feature: true do
     end
   end
 
+  context 'as a allowed mobile user', js: true do
+    before do
+      project.team << [user, :developer]
+      resize_screen_xs
+      visit_issue(project, issue)
+    end
+
+    context 'mobile sidebar' do
+      it 'collapses the sidebar for small screens' do
+        expect(page).not_to have_css('aside.right-sidebar.right-sidebar-collapsed')
+      end
+    end
+  end
+
   context 'as a guest' do
     before do
       project.team << [user, :guest]
diff --git a/spec/support/mobile_helpers.rb b/spec/support/mobile_helpers.rb
index 20d5849bcab..431f20a2a5c 100644
--- a/spec/support/mobile_helpers.rb
+++ b/spec/support/mobile_helpers.rb
@@ -1,4 +1,8 @@
 module MobileHelpers
+  def resize_screen_xs
+    resize_window(767, 768)
+  end
+
   def resize_screen_sm
     resize_window(900, 768)
   end