Apply responsive note styles to parallel diffsapply-same-responsive-notes-to-parallel-diff

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

1 files changed, 16 insertions, 18 deletions

diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index ddccfc96819..cec3b54d567 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -3,6 +3,12 @@
   margin: 0;
   padding: 0;
 
+  &::before {
+    @include notes-media('max', $screen-xs-max) {
+      background: none;
+    }
+  }
+
   .system-note {
     .note-text {
       color: $gl-text-color !important;
@@ -23,6 +29,16 @@
 
   .timeline-entry-inner {
     position: relative;
+
+    @include notes-media('max', $screen-xs-max) {
+      .timeline-icon {
+        display: none;
+      }
+
+      .timeline-content {
+        margin-left: 0;
+      }
+    }
   }
 
   &:target,
@@ -40,24 +56,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;