Fix layout of suggestion management buttons on mobile

Changelog: fixed

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue

@@ -137,7 +137,9 @@ export default {
 </script>
 
 <template>
-  <div class="md-suggestion-header border-bottom-0 gl-px-4 gl-py-3">
+  <div
+    class="md-suggestion-header border-bottom-0 gl-flex-col gl-items-start gl-gap-3 gl-px-4 gl-py-3 sm:gl-flex-row sm:gl-flex-wrap"
+  >
     <div class="js-suggestion-diff-header gl-font-bold">
       {{ __('Suggested change') }}
       <a v-if="helpPagePath" :href="helpPagePath" :aria-label="__('Help')" class="js-help-btn">
@@ -155,10 +157,10 @@ export default {
       <gl-loading-icon size="sm" class="gl-mr-3 gl-items-center gl-justify-center" />
       <span>{{ applyingSuggestionsMessage }}</span>
     </div>
-    <div v-else-if="isLoggedIn" class="gl-flex gl-items-center">
+    <div v-else-if="isLoggedIn" class="gl-flex gl-flex-wrap gl-items-center gl-gap-3">
       <div v-if="isBatched">
         <gl-button
-          class="btn-inverted js-remove-from-batch-btn btn-grouped"
+          class="btn-inverted js-remove-from-batch-btn"
           :disabled="isApplying"
           size="small"
           @click="removeSuggestionFromBatch"
@@ -168,7 +170,7 @@ export default {
       </div>
       <div v-else-if="!isDisableButton && suggestionsCount > 1">
         <gl-button
-          class="btn-inverted js-add-to-batch-btn btn-grouped"
+          class="btn-inverted js-add-to-batch-btn"
           data-testid="add-suggestion-batch-button"
           :disabled="isDisableButton"
           size="small"
@@ -184,7 +186,6 @@ export default {
         :default-commit-message="defaultCommitMessage"
         :batch-suggestions-count="batchSuggestionsCount"
         :error-message="applySuggestionErrorMessage"
-        class="gl-ml-3"
         @apply="apply"
       />
     </div>