Apply responsive note styles to parallel diffs

Fix inspired while working on
https://gitlab.com/gitlab-org/gitlab-ce/issues/32801

app/assets/stylesheets/framework.scss

@@ -34,6 +34,7 @@
 @import "framework/selects.scss";
 @import "framework/sidebar.scss";
 @import "framework/tables.scss";
+@import "framework/notes.scss";
 @import "framework/timeline.scss";
 @import "framework/typography.scss";
 @import "framework/zen.scss";

app/assets/stylesheets/framework/notes.scss

+@mixin notes-media($condition, $breakpoint-width) {
+  @media (#{$condition}-width: ($breakpoint-width)) {
+    @content;
+  }
+
+  // Diff is side by side
+  .notes_content.parallel & {
+    // We hide at double what we normally hide at because
+    // there are two columns of notes
+    @media (#{$condition}-width: (2 * $breakpoint-width)) {
+      @content;
+    }
+  }
+}

app/assets/stylesheets/framework/timeline.scss

@@ -3,6 +3,12 @@
   margin: 0;
   padding: 0;
+  @include notes-media('max', $screen-xs-max) {
+    &::before {
+      background: none;
+    }
+  }
+
   .note-text {
     p:last-child {
       margin-bottom: 0;
@@ -30,6 +36,16 @@
   .timeline-entry-inner {
     position: relative;
+
+    @include notes-media('max', $screen-xs-max) {
+      .timeline-icon {
+        display: none;
+      }
+
+      .timeline-content {
+        margin-left: 0;
+      }
+    }
   }
   &:target,
@@ -47,24 +63,6 @@
   }
 }
-@media (max-width: $screen-xs-max) {
-  .timeline {
-    &::before {
-      background: none;
-    }
-  }
-
-  .timeline-entry .timeline-entry-inner {
-    .timeline-icon {
-      display: none;
-    }
-
-    .timeline-content {
-      margin-left: 0;
-    }
-  }
-}
-
 .discussion .timeline-entry {
   margin: 0;
   border-right: none;

app/assets/stylesheets/pages/notes.scss

@@ -31,7 +31,7 @@ ul.notes {
     margin-left: 55px;
     &.timeline-content-form {
-      @media (max-width: $screen-sm-max) {
+      @include notes-media('max', $screen-sm-max) {
         margin-left: 0;
       }
     }
@@ -131,7 +131,7 @@ ul.notes {
     .note-header {
-      @media (max-width: $screen-xs-min) {
+      @include notes-media('max', $screen-xs-min) {
         .inline {
           display: block;
         }
@@ -163,7 +163,7 @@ ul.notes {
     padding: 0;
     clear: both;
-    @media (min-width: $screen-sm-min) {
+    @include notes-media('min', $screen-sm-min) {
       margin-left: 65px;
     }
@@ -200,7 +200,7 @@ ul.notes {
     .timeline-content {
       padding: 14px 10px;
-      @media (min-width: $screen-sm-min) {
+      @include notes-media('min', $screen-sm-min) {
         margin-left: 20px;
       }
     }
@@ -370,7 +370,7 @@ ul.notes {
   display: flex;
   justify-content: space-between;
-  @media (max-width: $screen-xs-max) {
+  @include notes-media('max', $screen-xs-max) {
     flex-flow: row wrap;
   }
 }
@@ -380,10 +380,16 @@ ul.notes {
   padding-bottom: 5px;
 }
+.note-header-author-name {
+  @include notes-media('max', $screen-xs-max) {
+    display: none;
+  }
+}
+
 .note-headline-light {
   display: inline;
-  @media (max-width: $screen-xs-min) {
+  @include notes-media('max', $screen-xs-min) {
     display: block;
   }
 }
@@ -425,7 +431,7 @@ ul.notes {
   margin-left: 10px;
   color: $gray-darkest;
-  @media (max-width: $screen-xs-max) {
+  @include notes-media('max', $screen-xs-max) {
     float: none;
     margin-left: 0;
   }
@@ -436,7 +442,7 @@ ul.notes {
 }
 .discussion-actions {
-  @media (max-width: $screen-md-max) {
+  @include notes-media('max', $screen-md-max) {
     float: none;
     margin-left: 0;
@@ -450,7 +456,7 @@ ul.notes {
   display: inline;
   line-height: 20px;
-  @media (min-width: $screen-sm-min) {
+  @include notes-media('min', $screen-sm-min) {
     margin-left: 10px;
     line-height: 24px;
   }
@@ -609,7 +615,7 @@ ul.notes {
 }
 .line-resolve-all-container {
-  @media (min-width: $screen-sm-min) {
+  @include notes-media('min', $screen-sm-min) {
     margin-right: 0;
     padding-left: $gl-padding;
   }
@@ -716,11 +722,6 @@ 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;

app/views/shared/notes/_note.html.haml

@@ -18,7 +18,7 @@
       .note-header
         .note-header-info
           %a{ href: user_path(note.author) }
-            %span.hidden-xs
+            %span.note-header-author-name
               = sanitize(note.author.name)
             %span.note-headline-light
               = note.author.to_reference