fix notes form styling33917-mr-comment-system-note-highlight-don-t-have-the-same-width

3 files changed, 21 insertions, 13 deletions

diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 69fed4e6bf7..9877ed2cfd6 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -148,8 +148,20 @@
   padding: 6px 0;
 }
 
-.notes-form > li {
-  border: 0;
+.notes.notes-form > li.timeline-entry {
+  @include notes-media('max', $screen-sm-max) {
+    padding: 0;
+  }
+
+  .timeline-content {
+    @include notes-media('max', $screen-sm-max) {
+      margin: 0;
+    }
+  }
+
+  .timeline-entry-inner {
+    border: 0;
+  }
 }
 
 .note-edit-form {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 7d5500ff318..6e7b5480a69 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -65,11 +65,6 @@ ul.notes {
       }
     }
 
-    &:last-child {
-      // Override `.timeline > li:last-child { border-bottom: none; }`
-      border-bottom: 1px solid $white-normal;
-    }
-
     &.being-posted {
       pointer-events: none;
       opacity: 0.5;
diff --git a/app/views/shared/notes/_notes_with_form.html.haml b/app/views/shared/notes/_notes_with_form.html.haml
index 0cca8d875d2..f0fcc414756 100644
--- a/app/views/shared/notes/_notes_with_form.html.haml
+++ b/app/views/shared/notes/_notes_with_form.html.haml
@@ -6,13 +6,14 @@
 - if can_create_note?
   %ul.notes.notes-form.timeline
     %li.timeline-entry
-      .flash-container.timeline-content
+      .timeline-entry-inner
+        .flash-container.timeline-content
 
-      .timeline-icon.hidden-xs.hidden-sm
-        %a.author_link{ href: user_path(current_user) }
-          = image_tag avatar_icon(current_user), alt: current_user.to_reference, class: 'avatar s40'
-      .timeline-content.timeline-content-form
-        = render "shared/notes/form", view: diff_view, supports_autocomplete: autocomplete
+        .timeline-icon.hidden-xs.hidden-sm
+          %a.author_link{ href: user_path(current_user) }
+            = image_tag avatar_icon(current_user), alt: current_user.to_reference, class: 'avatar s40'
+        .timeline-content.timeline-content-form
+          = render "shared/notes/form", view: diff_view, supports_autocomplete: autocomplete
 - elsif !current_user
   .disabled-comment.text-center.prepend-top-default
     Please