Refactor and tweak margin for note forms on Issuable

Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>

7 files changed, 31 insertions, 47 deletions

diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index b0573510ff9..ac70ddb3ff4 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1190,12 +1190,12 @@ export default class Notes {
     addForm = false;
     let lineTypeSelector = '';
     rowCssToAdd =
-      '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line" colspan="2"></td><td class="notes_content"><div class="content"></div></td></tr>';
+      '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line" colspan="2"></td><td class="notes_content"><div class="content discussion-notes"></div></td></tr>';
     // In parallel view, look inside the correct left/right pane
     if (this.isParallelView()) {
       lineTypeSelector = `.${lineType}`;
       rowCssToAdd =
-        '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes_content parallel old"><div class="content"></div></td><td class="notes_line new"></td><td class="notes_content parallel new"><div class="content"></div></td></tr>';
+        '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes_content parallel old"><div class="content discussion-notes"></div></td><td class="notes_line new"></td><td class="notes_content parallel new"><div class="content discussion-notes"></div></td></tr>';
     }
     const notesContentSelector = `.notes_content${lineTypeSelector} .content`;
     let notesContent = targetRow.find(notesContentSelector);
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index e0f883a8e08..476b15aca4a 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -258,9 +258,7 @@ Please check your network connection and try again.`;
                     :key="note.id"
                   />
                 </ul>
-                <div
-                  :class="{ 'is-replying': isReplying }"
-                  class="discussion-reply-holder">
+                <div class="discussion-reply-holder">
                   <template v-if="!isReplying && canReply">
                     <div
                       class="btn-group-justified discussion-with-resolve-btn"
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 7f037582ca0..679f783b1b6 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -813,6 +813,7 @@
 }
 
 .discussion-notes {
+  padding: 0 $gl-padding $gl-padding;
   min-height: 35px;
 
   &:first-child {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 4a528bc2bb1..8720f821ce9 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -173,11 +173,7 @@
 }
 
 .discussion-form {
-  background-color: $white-light;
-}
-
-.discussion-form-container {
-  padding: $gl-padding-top $gl-padding $gl-padding;
+  padding-top: $gl-padding-top;
 }
 
 .discussion-notes .disabled-comment {
@@ -237,12 +233,7 @@
 .discussion-body,
 .diff-file {
   .discussion-reply-holder {
-    background-color: $white-light;
-    padding: 10px 16px;
-
-    &.is-replying {
-      padding-bottom: $gl-padding;
-    }
+    padding-top: $gl-padding;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 81e98f358a8..9d9cbecc958 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -47,7 +47,7 @@ ul.notes {
     }
 
     .timeline-entry-inner {
-      padding: $gl-padding $gl-btn-padding;
+      padding: $gl-padding 0;
       border-bottom: 1px solid $white-normal;
     }
 
@@ -94,12 +94,6 @@ ul.notes {
       }
     }
 
-    &.note-discussion {
-      .timeline-entry-inner {
-        padding: $gl-padding 10px;
-      }
-    }
-
     .editing-spinner {
       display: none;
     }
@@ -352,6 +346,8 @@ ul.notes {
         }
 
         .discussion-notes {
+          background-color: $white-light;
+
           &:not(:first-child) {
             border-top: 1px solid $white-normal;
             margin-top: 20px;
@@ -363,10 +359,6 @@ ul.notes {
           }
         }
 
-        .notes {
-          background-color: $white-light;
-        }
-
         a code {
           top: 0;
           margin-right: 0;
@@ -647,8 +639,6 @@ ul.notes {
     border-bottom: 1px solid $white-normal;
 
     .timeline-entry-inner {
-      padding-left: $gl-padding;
-      padding-right: $gl-padding;
       border-bottom: 0;
     }
   }
diff --git a/app/views/shared/notes/_form.html.haml b/app/views/shared/notes/_form.html.haml
index 71c0d740bc8..725bf916592 100644
--- a/app/views/shared/notes/_form.html.haml
+++ b/app/views/shared/notes/_form.html.haml
@@ -24,21 +24,20 @@
   -# DiffNote
   = f.hidden_field :position
 
-  .discussion-form-container
-    = render layout: 'projects/md_preview', locals: { url: preview_url, referenced_users: true } do
-      = render 'projects/zen', f: f,
-        attr: :note,
-        classes: 'note-textarea js-note-text',
-        placeholder: "Write a comment or drag your files here...",
-        supports_quick_actions: supports_quick_actions,
-        supports_autocomplete: supports_autocomplete
-      = render 'shared/notes/hints', supports_quick_actions: supports_quick_actions
-      .error-alert
-
-    .note-form-actions.clearfix
-      = render partial: 'shared/notes/comment_button'
-
-      = yield(:note_actions)
-
-      %a.btn.btn-cancel.js-note-discard{ role: "button", data: {cancel_text: "Cancel" } }
-        Discard draft
+  = render layout: 'projects/md_preview', locals: { url: preview_url, referenced_users: true } do
+    = render 'projects/zen', f: f,
+      attr: :note,
+      classes: 'note-textarea js-note-text',
+      placeholder: "Write a comment or drag your files here...",
+      supports_quick_actions: supports_quick_actions,
+      supports_autocomplete: supports_autocomplete
+    = render 'shared/notes/hints', supports_quick_actions: supports_quick_actions
+    .error-alert
+
+  .note-form-actions.clearfix
+    = render partial: 'shared/notes/comment_button'
+
+    = yield(:note_actions)
+
+    %a.btn.btn-cancel.js-note-discard{ role: "button", data: {cancel_text: "Cancel" } }
+      Discard draft
diff --git a/changelogs/unreleased/44870-remove-extra-space-around-comment-form-on-merge-requests.yml b/changelogs/unreleased/44870-remove-extra-space-around-comment-form-on-merge-requests.yml
new file mode 100644
index 00000000000..53e4ebdb996
--- /dev/null
+++ b/changelogs/unreleased/44870-remove-extra-space-around-comment-form-on-merge-requests.yml
@@ -0,0 +1,5 @@
+---
+title: Refactor and tweak margin for note forms on Issuable
+merge_request: 18120
+author: Takuya Noguchi
+type: fixed