Fix input group and action buttons in "set status" modal

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -178,7 +178,7 @@ export default {
       />
       <div ref="userStatusForm" class="form-group position-relative m-0">
         <div class="input-group">
-          <span class="input-group-btn">
+          <span class="input-group-prepend">
             <button
               ref="toggleEmojiMenuButton"
               v-gl-tooltip.bottom
@@ -211,7 +211,7 @@ export default {
             @keyup.enter.prevent
             @click="hideEmojiMenu"
           />
-          <span v-show="isDirty" class="input-group-btn">
+          <span v-show="isDirty" class="input-group-append">
             <button
               v-gl-tooltip.bottom
               :title="s__('SetStatusModal|Clear status')"

app/assets/stylesheets/framework/header.scss

@@ -581,10 +581,15 @@
 
   .emoji-menu-toggle-button {
     @include emoji-menu-toggle-button;
+    padding: $gl-vert-padding $gl-btn-padding;
   }
 
   .input-group {
-    height: 34px;
+    &,
+    .input-group-prepend,
+    .input-group-append {
+      height: $input-height;
+    }
   }
 }
 

app/assets/stylesheets/framework/modal.scss

@@ -66,12 +66,6 @@
       margin-top: $grid-size;
     }
   }
-
-  @include media-breakpoint-up(sm) {
-    .btn:nth-child(1) {
-      margin-left: auto;
-    }
-  }
 }
 
 body.modal-open {

changelogs/unreleased/61494-set-status-modal-visual-bugs.yml

+---
+title: Fix visual issues in set status modal
+merge_request: 28147
+author:
+type: fixed