Merge branch '338531-render-references-in-content-editor' into 'master'

Fix mobile layout issues in notes form

See merge request gitlab-org/gitlab!68414

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

@@ -21,7 +21,7 @@ export default {
 </script>
 
 <template>
-  <gl-button :loading="isResolving" class="ml-sm-2" @click="$emit('onClick')">
+  <gl-button :loading="isResolving" class="gl-xs-w-full ml-sm-2" @click="$emit('onClick')">
     {{ buttonTitle }}
   </gl-button>
 </template>

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

@@ -29,7 +29,7 @@ export default {
       :href="url"
       :title="$options.i18n.buttonLabel"
       :aria-label="$options.i18n.buttonLabel"
-      class="new-issue-for-discussion discussion-create-issue-btn"
+      class="new-issue-for-discussion discussion-create-issue-btn gl-xs-w-full"
       icon="issue-new"
     />
   </div>

app/assets/stylesheets/pages/note_form.scss

@@ -295,12 +295,6 @@ table {
       }
     }
   }
-
-  @include media-breakpoint-down(xs) {
-    .btn {
-      width: 100%;
-    }
-  }
 }
 
 .discussion-reply-holder {

app/assets/stylesheets/pages/notes.scss

@@ -649,7 +649,7 @@ $system-note-svg-size: 16px;
 
   @include media-breakpoint-down(xs) {
     width: 100%;
-    margin: $gl-padding-8 0;
+    margin: 0 0 $gl-padding-8;
   }
 
   .btn-group > .discussion-next-btn {

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

 - noteable_name = @note.noteable.human_class_name
 
-.float-left.btn-group.gl-mr-3.droplab-dropdown.comment-type-dropdown.js-comment-type-dropdown
+.float-left.btn-group.gl-sm-mr-3.droplab-dropdown.comment-type-dropdown.js-comment-type-dropdown
   %input.btn.gl-button.btn-confirm.js-comment-button.js-comment-submit-button{ type: 'submit', value: _('Comment'), data: { qa_selector: 'comment_button' } }
 
   - if @note.can_be_discussion_note?

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

@@ -35,7 +35,7 @@
       = render 'shared/notes/hints', supports_quick_actions: supports_quick_actions
       .error-alert
 
-    .note-form-actions.clearfix
+    .note-form-actions.clearfix.gl-display-flex.gl-flex-wrap
       = render partial: 'shared/notes/comment_button'
 
       %a.btn.gl-button.btn-cancel.js-close-discussion-note-form.hide{ role: "button", data: { cancel_text: _("Cancel") } }