Fix broken UI on commit discussions

2 files changed, 37 insertions, 19 deletions

diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 855d73a9939..45b921a2fbb 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -176,8 +176,10 @@
   background-color: $white-light;
 }
 
-.discussion-form-container {
-  padding: $gl-padding-top $gl-padding $gl-padding;
+table {
+  .discussion-form-container {
+    padding: $gl-padding-top $gl-padding $gl-padding;
+  }
 }
 
 .discussion-notes .disabled-comment {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index adcc3577a9c..35e01c9c807 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/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 {