Merge branch '53780-commit-discussion-ui' into 'master'

Fix broken UI on commit discussions

Closes #53780

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

app/assets/stylesheets/pages/note_form.scss

@@ -176,8 +176,10 @@
   background-color: $white-light;
 }
 
-.discussion-form-container {
+table {
+  .discussion-form-container {
     padding: $gl-padding-top $gl-padding $gl-padding;
+  }
 }
 
 .discussion-notes .disabled-comment {

app/assets/stylesheets/pages/notes.scss

@@ -13,12 +13,32 @@ $note-form-margin-left: 72px;
   }
 }
 
+@mixin outline-comment() {
+  margin: $gl-padding;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+}
+
 .note-wrapper {
   padding: $gl-padding;
+
+  &.outlined {
+    @include outline-comment();
+  }
+}
+
+.main-notes-list {
+  @include vertical-line(39px);
 }
 
-.issuable-discussion {
-  .notes.timeline > .timeline-entry {
+.notes {
+  display: block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+
+  &.timeline > .timeline-entry {
     border: 1px solid $border-color;
     border-radius: $border-radius-default;
     margin: $gl-padding 0;
@@ -51,18 +71,6 @@ $note-form-margin-left: 72px;
       border-top: 1px solid $border-color;
     }
   }
-}
-
-.main-notes-list {
-  @include vertical-line(36px);
-}
-
-.notes {
-  display: block;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  position: relative;
 
   > .note-discussion {
     .card {
@@ -476,9 +484,7 @@ $note-form-margin-left: 72px;
   }
 
   .note-wrapper {
-    margin: $gl-padding;
-    border: 1px solid $border-color;
-    border-radius: $border-radius-default;
+    @include outline-comment();
   }
 
   .discussion-reply-holder {
@@ -488,6 +494,16 @@ $note-form-margin-left: 72px;
   }
 }
 
+.commit-diff {
+  .notes {
+    @include vertical-line(52px);
+  }
+
+  .discussion-reply-holder {
+    border-top: 1px solid $border-color;
+  }
+}
+
 .discussion-header,
 .note-header-info {
   a {

app/views/projects/diffs/_text_file.html.haml

@@ -3,7 +3,7 @@
   .suppressed-container
     %a.show-suppressed-diff.js-show-suppressed-diff Changes suppressed. Click to show.
 
-%table.text-file.diff-wrap-lines.code.js-syntax-highlight{ data: diff_view_data, class: too_big ? 'hide' : '' }
+%table.text-file.diff-wrap-lines.code.js-syntax-highlight.commit-diff{ data: diff_view_data, class: too_big ? 'hide' : '' }
   = render partial: "projects/diffs/line",
     collection: diff_file.highlighted_diff_lines,
     as: :line,

app/views/shared/notes/_note.html.haml

@@ -5,7 +5,7 @@
 - note_editable = can?(current_user, :admin_note, note)
 - note_counter = local_assigns.fetch(:note_counter, 0)
 
-%li.timeline-entry{ id: dom_id(note),
+%li.timeline-entry.note-wrapper.outlined{ id: dom_id(note),
   class: ["note", "note-row-#{note.id}", ('system-note' if note.system)],
   data: { author_id: note.author.id,
     editable: note_editable,

app/views/shared/notes/_notes_with_form.html.haml

@@ -8,7 +8,7 @@
 
 - if can_create_note?
   .notes.notes-form.timeline
-    .timeline-entry
+    .timeline-entry.note-form
       .timeline-entry-inner
         .flash-container.timeline-content