adds note actions in new line for xs screen

1 files changed, 28 insertions, 10 deletions

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index cb0a1e5129c..f57e3f7d7cf 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -575,18 +575,36 @@ ul.notes {
 
 // Merge request notes in diffs
 .diff-file {
-  // Diff is side by side
-  .notes_content.parallel .note-header .note-headline-light {
-    display: block;
-    position: relative;
-  }
-  // Diff is inline
-  .notes_content .note-header .note-headline-light {
-    display: inline-block;
-    position: relative;
 
-    @media (max-width: $screen-md-min) {
+  .note-header {
+    display: flex;
+
+    @media (max-width: $screen-xs-max) {
       display: block;
     }
+
+    .note-actions {
+      position: relative;
+
+      @media (max-width: $screen-xs-max) {
+        margin: 5px 0 0;
+        right: inherit;
+      }
+    }
+
+    .note-messages {
+      flex: 1;
+
+      @media (max-width: $screen-xs-max) {
+        flex-basis: 100%;
+      }
+    }
   }
+
+  .note-body {
+    @media (max-width: $screen-xs-max) {
+      clear: both;
+    }
+  }
+
 }