Merge branch '53882-extra-container-diff-version' into 'master'

Fix version system note

Closes #53882

See merge request gitlab-org/gitlab-ce!23030

(cherry picked from commit d645df8220669b7ccb889349d412bf527d621fc4)

f25e6aa2 Fix version system note
d0f8e279 Remove box on diff tab system note
0c4170b8 Add back margin on discussion system notes
5e66292d Tweak vertical line to line up with system notes and comment avatars

1 files changed, 25 insertions, 2 deletions

diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index e4f59778d1e..1f34537d856 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -272,7 +272,7 @@ $note-form-margin-left: 72px;
   }
 
   .system-note {
-    padding: 6px 20px;
+    padding: 6px 21px;
     margin: $gl-padding-24 0;
     background-color: transparent;
 
@@ -407,6 +407,24 @@ $note-form-margin-left: 72px;
   }
 }
 
+.tab-pane.notes {
+  .diff-file .notes .system-note {
+    margin: 0;
+  }
+}
+
+.tab-pane.diffs {
+  .system-note {
+    padding: 0 $gl-padding;
+    margin-left: 20px;
+  }
+
+  .notes > .note-discussion li.note.system-note {
+    border-bottom: 0;
+    padding: 0 $gl-padding;
+  }
+}
+
 .diff-file {
   .is-over {
     .add-diff-note {
@@ -426,7 +444,7 @@ $note-form-margin-left: 72px;
     }
 
     .system-note {
-      margin: 0;
+      background-color: $white-light;
       padding: $gl-padding;
     }
   }
@@ -485,6 +503,11 @@ $note-form-margin-left: 72px;
 
   .note-wrapper {
     @include outline-comment();
+
+    &.system-note {
+      border: 0;
+      margin-left: 20px;
+    }
   }
 
   .discussion-reply-holder {