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', () => {