fixes note header overlap for diff files27666-fix-note-header-overlap

2 files changed, 44 insertions, 7 deletions

diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index ff185cd8767..0b7f3b7ea55 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -59,8 +59,22 @@
       }
     }
   }
+
+  // remove timeline icon (avatar) for diff file in mobile
+  .diff-file {
+    .timeline-entry .timeline-entry-inner {
+      .timeline-icon {
+        display: none;
+      }
+
+      .timeline-content {
+        margin-left: 0;
+      }
+    }
+  }
 }
 
+
 .discussion .timeline-entry {
   margin: 0;
   border-right: none;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index f57e3f7d7cf..5ca81f1ca9b 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -3,9 +3,17 @@
  */
 
 @-webkit-keyframes targe3-note {
-  from { background: $note-targe3-outside; }
-  50% { background: $note-targe3-inside; }
-  to { background: $note-targe3-outside; }
+  from {
+    background: $note-targe3-outside;
+  }
+
+  50% {
+    background: $note-targe3-inside;
+  }
+
+  to {
+    background: $note-targe3-outside;
+  }
 }
 
 ul.notes {
@@ -447,7 +455,6 @@ ul.notes {
   border-radius: $border-radius-base;
 }
 
-
 /**
  * Line note button on the side of diffs
  */
@@ -574,7 +581,23 @@ ul.notes {
 }
 
 // Merge request notes in diffs
+
 .diff-file {
+  .notes_content {
+    &.parallel {
+      @media (max-width: $screen-sm-max) {
+        .note-header {
+          display: inline-block;
+        }
+
+        .note-actions {
+          float: left;
+          margin: 5px 0 0;
+          right: auto;
+        }
+      }
+    }
+  }
 
   .note-header {
     display: flex;
@@ -587,8 +610,9 @@ ul.notes {
       position: relative;
 
       @media (max-width: $screen-xs-max) {
+        float: left;
         margin: 5px 0 0;
-        right: inherit;
+        right: auto;
       }
     }
 
@@ -596,7 +620,7 @@ ul.notes {
       flex: 1;
 
       @media (max-width: $screen-xs-max) {
-        flex-basis: 100%;
+        width: 100%;
       }
     }
   }
@@ -606,5 +630,4 @@ ul.notes {
       clear: both;
     }
   }
-
 }