Fix styling of snippet and commit discussion comments

app/assets/stylesheets/pages/notes.scss

@@ -910,3 +910,23 @@ $note-form-margin-left: 72px;
     }
   }
 }
+
+//This needs to be deleted when Snippet/Commit comments are convered to Vue
+// See https://gitlab.com/gitlab-org/gitlab-ce/issues/53918#note_117038785
+.unstyled-comments {
+
+  .discussion-header {
+    padding: $gl-padding;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .note-wrapper.outlined {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .discussion-form-container {
+    padding: $gl-padding;
+  }
+}

app/views/discussions/_discussion.html.haml

 - expanded = discussion.expanded?
-%li.note.note-discussion.timeline-entry
+%li.note.note-discussion.timeline-entry.unstyled-comments
   .timeline-entry-inner
-    .timeline-icon
-      = link_to user_path(discussion.author) do
-        = image_tag avatar_icon_for_user(discussion.author), class: "avatar s40"
     .timeline-content
       .discussion.js-toggle-container{ data: { discussion_id: discussion.id } }
         .discussion-header
+          .timeline-icon
+            = link_to user_path(discussion.author) do
+              = image_tag avatar_icon_for_user(discussion.author), class: "avatar s40"
           .discussion-actions
             %button.note-action-button.discussion-toggle-button.js-toggle-button{ type: "button", class: ("js-toggle-lazy-diff" unless expanded) }
               - if expanded