Add edit button to mobile file view

4 files changed, 30 insertions, 1 deletions

diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index c2a3cd16e67..609f33582e1 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -364,6 +364,18 @@ span.idiff {
       float: none;
     }
   }
+
+  @media (max-width: $screen-xs-max) {
+    display: block;
+
+    .file-actions {
+      white-space: normal;
+
+      .btn-group {
+        padding-top: 5px;
+      }
+    }
+  }
 }
 
 .is-stl-loading {
diff --git a/app/views/projects/blob/_header.html.haml b/app/views/projects/blob/_header.html.haml
index 0be15cc179f..281363d2e01 100644
--- a/app/views/projects/blob/_header.html.haml
+++ b/app/views/projects/blob/_header.html.haml
@@ -2,7 +2,7 @@
 .js-file-title.file-title-flex-parent
   = render 'projects/blob/header_content', blob: blob
 
-  .file-actions.hidden-xs
+  .file-actions
     = render 'projects/blob/viewer_switcher', blob: blob unless blame
 
     .btn-group{ role: "group" }<
diff --git a/changelogs/unreleased/28377-add-edit-button-to-mobile-file-view.yml b/changelogs/unreleased/28377-add-edit-button-to-mobile-file-view.yml
new file mode 100644
index 00000000000..b6646379b8d
--- /dev/null
+++ b/changelogs/unreleased/28377-add-edit-button-to-mobile-file-view.yml
@@ -0,0 +1,5 @@
+---
+title: Add edit button to mobile file view
+merge_request: 15199
+author: Travis Miller
+type: added
diff --git a/spec/features/projects/blobs/blob_show_spec.rb b/spec/features/projects/blobs/blob_show_spec.rb
index 3d465e709b9..88813d9b5ff 100644
--- a/spec/features/projects/blobs/blob_show_spec.rb
+++ b/spec/features/projects/blobs/blob_show_spec.rb
@@ -1,6 +1,8 @@
 require 'spec_helper'
 
 feature 'File blob', :js do
+  include MobileHelpers
+
   let(:project) { create(:project, :public, :repository) }
 
   def visit_blob(path, anchor: nil, ref: 'master')
@@ -30,6 +32,16 @@ feature 'File blob', :js do
         expect(page).to have_link('Open raw')
       end
     end
+
+    it 'displays file actions on all screen sizes' do
+      file_actions_selector = '.file-actions'
+
+      resize_screen_sm
+      expect(page).to have_selector(file_actions_selector, visible: true)
+
+      resize_screen_xs
+      expect(page).to have_selector(file_actions_selector, visible: true)
+    end
   end
 
   context 'Markdown file' do