From 2da0af68552ce89edf4dd344c2160cc0da04441a Mon Sep 17 00:00:00 2001
From: Paul Gascou-Vaillancourt <pgascouvaillancourt@gitlab.com>
Date: Tue, 7 May 2019 22:02:25 +0000
Subject: Fix input group and action buttons in "set status" modal

---
 .../javascripts/set_status_modal/set_status_modal_wrapper.vue      | 4 ++--
 app/assets/stylesheets/framework/header.scss                       | 7 ++++++-
 app/assets/stylesheets/framework/modal.scss                        | 6 ------
 changelogs/unreleased/61494-set-status-modal-visual-bugs.yml       | 5 +++++
 4 files changed, 13 insertions(+), 9 deletions(-)
 create mode 100644 changelogs/unreleased/61494-set-status-modal-visual-bugs.yml

diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
index c0659a0173a..10e2c8453e2 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
+++ b/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')"
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index a6179e2a96e..a57cd6737f8 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/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;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 323a3dbecd5..e2bb1eb67c0 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/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 {
diff --git a/changelogs/unreleased/61494-set-status-modal-visual-bugs.yml b/changelogs/unreleased/61494-set-status-modal-visual-bugs.yml
new file mode 100644
index 00000000000..4126b8f93c1
--- /dev/null
+++ b/changelogs/unreleased/61494-set-status-modal-visual-bugs.yml
@@ -0,0 +1,5 @@
+---
+title: Fix visual issues in set status modal
+merge_request: 28147
+author:
+type: fixed
-- 
cgit v1.2.1