Shows the edit comment button on mobileedit-mobile

Closes #17214

3 files changed, 26 insertions, 9 deletions

diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index bd531f8376b..d4e5cc819a4 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -66,10 +66,6 @@
     display: none;
   }
 
-  %ul.notes .note-role, .note-actions {
-    display: none;
-  }
-
   .nav-links, .nav-links {
     li a {
       font-size: 14px;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index a3e1ac13a43..0e82c457232 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -118,6 +118,11 @@ ul.notes {
 
     .note-header {
       padding-bottom: 3px;
+      padding-right: 20px;
+
+      @media (min-width: $screen-sm-min) {
+        padding-right: 0;
+      }
     }
 
   }
@@ -179,6 +184,8 @@ ul.notes {
 
 .discussion-header,
 .note-header {
+  position: relative;
+
   a {
     color: inherit;
 
@@ -215,6 +222,16 @@ ul.notes {
   color: $notes-action-color;
 }
 
+.note-actions {
+  position: absolute;
+  right: 0;
+  top: 0;
+  
+  @media (min-width: $screen-sm-min) {
+    position: relative;
+  }
+}
+
 .discussion-actions {
   @media (max-width: $screen-md-max) {
     float: none;
@@ -228,8 +245,13 @@ ul.notes {
 
 .note-action-button {
   display: inline-block;
-  margin-left: 10px;
-  line-height: 24px;
+  margin-left: 0;
+  line-height: 20px;
+
+  @media (min-width: $screen-sm-min) {
+    margin-left: 10px;
+    line-height: 24px;
+  }
 
   .fa {
     color: $notes-action-color;
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index f1045bbd8c3..f6b7463ff07 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -19,12 +19,11 @@
         .note-actions
           - access = note.project.team.human_max_access(note.author.id)
           - if access
-            %span.note-role
-              = access
+            %span.note-role.hidden-xs= access
           - if note_editable
             = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do
               = icon('pencil')
-            = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button js-note-delete danger' do
+            = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button hidden-xs js-note-delete danger' do
               = icon('trash-o')
       .note-body{class: note_editable ? 'js-task-list-container' : ''}
         .note-text