1 files changed, 15 insertions, 11 deletions

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index feee964f9bb..299eda53140 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -22,7 +22,7 @@ ul.notes {
   .discussion-body {
     padding-top: 8px;
 
-    .panel {
+    .card {
       margin-bottom: 0;
     }
   }
@@ -42,7 +42,7 @@ ul.notes {
     position: relative;
     border-bottom: 0;
 
-    @include notes-media('min', $screen-sm-min) {
+    @include notes-media('min', map-get($grid-breakpoints, sm)) {
       padding-left: $note-icon-gutter-width;
     }
 
@@ -66,7 +66,7 @@ ul.notes {
     }
 
     .timeline-icon {
-      @include notes-media('min', $screen-sm-min) {
+      @include notes-media('min', map-get($grid-breakpoints, sm)) {
         margin-left: -$note-icon-gutter-width;
       }
     }
@@ -74,7 +74,7 @@ ul.notes {
     .timeline-content {
       margin-left: $note-icon-gutter-width;
 
-      @include notes-media('min', $screen-sm-min) {
+      @include notes-media('min', map-get($grid-breakpoints, sm)) {
         margin-left: 0;
       }
     }
@@ -154,7 +154,7 @@ ul.notes {
 
     .note-header {
 
-      @include notes-media('max', $screen-xs-min) {
+      @include notes-media('max', map-get($grid-breakpoints, xs)) {
         .inline {
           display: block;
         }
@@ -217,7 +217,7 @@ ul.notes {
     .timeline-icon {
       float: left;
 
-      @include notes-media('min', $screen-sm-min) {
+      @include notes-media('min', map-get($grid-breakpoints, sm)) {
         margin-left: 0;
         width: auto;
       }
@@ -231,7 +231,7 @@ ul.notes {
     }
 
     .timeline-content {
-      @include notes-media('min', $screen-sm-min) {
+      @include notes-media('min', map-get($grid-breakpoints, sm)) {
         margin-left: 30px;
       }
     }
@@ -423,7 +423,7 @@ ul.notes {
 }
 
 .note-header-author-name {
-  @include notes-media('max', $screen-xs-max) {
+  @include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
     display: none;
   }
 }
@@ -431,7 +431,7 @@ ul.notes {
 .note-headline-light {
   display: inline;
 
-  @include notes-media('max', $screen-xs-min) {
+  @include notes-media('max', map-get($grid-breakpoints, xs)) {
     display: block;
   }
 }
@@ -486,7 +486,7 @@ ul.notes {
   margin-left: 10px;
   color: $gray-darkest;
 
-  @include notes-media('max', $screen-xs-max) {
+  @include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
     float: none;
     margin-left: 0;
   }
@@ -634,6 +634,10 @@ ul.notes {
   margin-left: -55px;
   position: absolute;
   z-index: 10;
+
+  .new & {
+    margin-top: -10px;
+  }
 }
 
 .discussion-body,
@@ -668,7 +672,7 @@ ul.notes {
 }
 
 .line-resolve-all-container {
-  @include notes-media('min', $screen-sm-min) {
+  @include notes-media('min', map-get($grid-breakpoints, sm)) {
     margin-right: 0;
     padding-left: $gl-padding;
   }