From 7099211ea7eb409e7b13670a3ecaa8503f4714fc Mon Sep 17 00:00:00 2001
From: Fatih Acet <acetfatih@gmail.com>
Date: Fri, 31 May 2019 14:45:37 +0200
Subject: [PATCH] Fix emoji picker visibility issue

---
 app/assets/javascripts/notes/components/note_actions.vue | 1 +
 changelogs/unreleased/60987-emoji-picker-popup.yml       | 5 +++++
 spec/javascripts/notes/components/note_actions_spec.js   | 1 +
 3 files changed, 7 insertions(+)
 create mode 100644 changelogs/unreleased/60987-emoji-picker-popup.yml

diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index 78f397ccc12..c9c40cb6acf 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -147,6 +147,7 @@ export default {
         class="note-action-button note-emoji-button js-add-award js-note-emoji"
         href="#"
         title="Add reaction"
+        data-position="right"
       >
         <icon css-classes="link-highlight award-control-icon-neutral" name="slight-smile" />
         <icon css-classes="link-highlight award-control-icon-positive" name="smiley" />
diff --git a/changelogs/unreleased/60987-emoji-picker-popup.yml b/changelogs/unreleased/60987-emoji-picker-popup.yml
new file mode 100644
index 00000000000..3bccec8e164
--- /dev/null
+++ b/changelogs/unreleased/60987-emoji-picker-popup.yml
@@ -0,0 +1,5 @@
+---
+title: Fix emoji picker visibility issue
+merge_request: 28984
+author:
+type: fixed
diff --git a/spec/javascripts/notes/components/note_actions_spec.js b/spec/javascripts/notes/components/note_actions_spec.js
index 0cfcc994234..2159e4ddf16 100644
--- a/spec/javascripts/notes/components/note_actions_spec.js
+++ b/spec/javascripts/notes/components/note_actions_spec.js
@@ -58,6 +58,7 @@ describe('noteActions', () => {
 
     it('should render emoji link', () => {
       expect(wrapper.find('.js-add-award').exists()).toBe(true);
+      expect(wrapper.find('.js-add-award').attributes('data-position')).toBe('right');
     });
 
     describe('actions dropdown', () => {