Fix spacing between buttons

Fix spacing and alignment on xs / md breakpoints

app/assets/javascripts/notes/components/note_form.vue

@@ -362,7 +362,7 @@ export default {
           </template>
         </markdown-field>
       </comment-field-layout>
-      <div class="note-form-actions clearfix">
+      <div class="note-form-actions">
         <template v-if="showBatchCommentsActions">
           <p v-if="showResolveDiscussionToggle">
             <label>
@@ -386,12 +386,12 @@ export default {
               </template>
             </label>
           </p>
-          <div class="gl-display-sm-flex gl-flex-wrap">
+          <div class="gl-display-flex gl-flex-wrap gl-mb-n3">
             <gl-button
               :disabled="isDisabled"
               category="primary"
               variant="confirm"
-              class="gl-mr-3"
+              class="gl-sm-mr-3 gl-mb-3"
               data-qa-selector="start_review_button"
               @click="handleAddToReview"
             >
@@ -403,13 +403,13 @@ export default {
               category="secondary"
               variant="confirm"
               data-qa-selector="comment_now_button"
-              class="gl-mr-3 js-comment-button"
+              class="gl-sm-mr-3 gl-mb-3 js-comment-button"
               @click="handleUpdate()"
             >
               {{ __('Add comment now') }}
             </gl-button>
             <gl-button
-              class="note-edit-cancel js-close-discussion-note-form"
+              class="note-edit-cancel gl-mb-3 js-close-discussion-note-form"
               category="secondary"
               variant="default"
               data-testid="cancelBatchCommentsEnabled"

app/assets/stylesheets/pages/note_form.scss

@@ -369,10 +369,6 @@ table {
     .btn {
       float: none;
       width: 100%;
-
-      &:not(:last-child) {
-        margin-bottom: 10px;
-      }
     }
   }
 }

app/assets/stylesheets/utilities.scss

@@ -172,3 +172,13 @@
     width: 50%;
   }
 }
+
+.gl-sm-mr-3 {
+  @include media-breakpoint-up(sm) {
+    margin-right: $gl-spacing-scale-3;
+  }
+}
+
+.gl-mb-n3 {
+  margin-bottom: -$gl-spacing-scale-3;
+}