Resolve "MR comment + system note highlight don't have the same width"

app/assets/stylesheets/framework/variables.scss

@@ -323,6 +323,7 @@ $note-disabled-comment-color: #b2b2b2;
 $note-targe3-outside: #fffff0;
 $note-targe3-inside: #ffffd3;
 $note-line2-border: #ddd;
+$note-icon-gutter-width: 55px;
 
 
 /*

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 {

app/assets/stylesheets/pages/notes.scss

@@ -14,16 +14,6 @@ ul.notes {
   margin: 0;
   padding: 0;
 
-  .timeline-content {
-    margin-left: 55px;
-
-    &.timeline-content-form {
-      @include notes-media('max', $screen-sm-max) {
-        margin-left: 0;
-      }
-    }
-  }
-
   .note-created-ago,
   .note-updated-at {
     white-space: nowrap;
@@ -46,17 +36,49 @@ ul.notes {
     }
   }
 
-  > li {
-    padding: $gl-padding $gl-btn-padding;
+  > li { // .timeline-entry
+    padding: 0;
     display: block;
     position: relative;
-    border-bottom: 1px solid $white-normal;
+    border-bottom: 0;
+
+    @include notes-media('min', $screen-sm-min) {
+      padding-left: $note-icon-gutter-width;
+    }
 
-    &:last-child {
-      // Override `.timeline > li:last-child { border-bottom: none; }`
+    .timeline-entry-inner {
+      padding: $gl-padding $gl-btn-padding;
       border-bottom: 1px solid $white-normal;
     }
 
+    &:target,
+    &.target {
+      border-bottom: 1px solid $white-normal;
+
+      &:not(:first-child) {
+        border-top: 1px solid $white-normal;
+        margin-top: -1px;
+      }
+
+      .timeline-entry-inner {
+        border-bottom: 0;
+      }
+    }
+
+    .timeline-icon {
+      @include notes-media('min', $screen-sm-min) {
+        margin-left: -$note-icon-gutter-width;
+      }
+    }
+
+    .timeline-content {
+      margin-left: $note-icon-gutter-width;
+
+      @include notes-media('min', $screen-sm-min) {
+        margin-left: 0;
+      }
+    }
+
     &.being-posted {
       pointer-events: none;
       opacity: 0.5;
@@ -73,7 +95,7 @@ ul.notes {
     }
 
     &.note-discussion {
-      &.timeline-entry {
+      .timeline-entry-inner {
         padding: $gl-padding 10px;
       }
     }
@@ -152,13 +174,8 @@ ul.notes {
 
   .system-note {
     font-size: 14px;
-    padding-left: 0;
     clear: both;
 
-    @include notes-media('min', $screen-sm-min) {
-      margin-left: 65px;
-    }
-
     .note-header-info {
       padding-bottom: 0;
     }
@@ -192,13 +209,16 @@ ul.notes {
     .timeline-icon {
       float: left;
 
+      @include notes-media('min', $screen-sm-min) {
+        margin-left: 0;
+        width: auto;
+      }
+
       svg {
         width: 16px;
         height: 16px;
         fill: $gray-darkest;
-        position: absolute;
-        left: 0;
-        top: 2px;
+        margin-top: 2px;
       }
     }
 
@@ -639,15 +659,12 @@ ul.notes {
 .discussion-body,
 .diff-file {
   .notes .note {
-    padding-left: $gl-padding;
-    padding-right: $gl-padding;
-
-    &.system-note {
-      padding-left: 0;
+    border-bottom: 1px solid $white-normal;
 
-      @media (min-width: $screen-sm-min) {
-        margin-left: 70px;
-      }
+    .timeline-entry-inner {
+      padding-left: $gl-padding;
+      padding-right: $gl-padding;
+      border-bottom: none;
     }
   }
 }

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

changelogs/unreleased/33917-mr-comment-system-note-highlight-don-t-have-the-same-width.yml

+---
+title: Standardize timeline note margins across different viewport sizes
+merge_request: 12364
+author: