Merge branch 'kp-fix-status-emoji-picker-position' into 'master'

Fix user status emoji picker positioning

See merge request gitlab-org/gitlab!77394

app/assets/javascripts/emoji/components/picker.vue

@@ -28,6 +28,16 @@ export default {
       required: false,
       default: () => [],
     },
+    right: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    boundary: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -62,7 +72,7 @@ export default {
       addToFrequentlyUsed(name);
     },
     getBoundaryElement() {
-      return document.querySelector('.content-wrapper') || 'scrollParent';
+      return this.boundary || document.querySelector('.content-wrapper') || 'scrollParent';
     },
     onSearchInput() {
       this.$refs.virtualScoller.setScrollTop(0);
@@ -87,7 +97,7 @@ export default {
       menu-class="dropdown-extended-height"
       category="secondary"
       no-flip
-      right
+      :right="right"
       lazy
       @shown="$emit('shown')"
       @hidden="$emit('hidden')"

app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue

@@ -267,6 +267,8 @@ export default {
               v-if="glFeatures.improvedEmojiPicker"
               dropdown-class="gl-h-full"
               toggle-class="btn emoji-menu-toggle-button gl-px-4! gl-rounded-top-right-none! gl-rounded-bottom-right-none!"
+              boundary="viewport"
+              :right="false"
               @click="setEmoji"
             >
               <template #button-content>

spec/frontend/set_status_modal/set_status_modal_wrapper_spec.js

@@ -110,14 +110,23 @@ describe('SetStatusModalWrapper', () => {
   });
 
   describe('improvedEmojiPicker is true', () => {
+    const getEmojiPicker = () => wrapper.findComponent(EmojiPicker);
+
     beforeEach(async () => {
       await initEmojiMock();
       wrapper = createComponent({}, true);
       return initModal();
     });
 
+    it('renders emoji picker dropdown with custom positioning', () => {
+      expect(getEmojiPicker().props()).toMatchObject({
+        right: false,
+        boundary: 'viewport',
+      });
+    });
+
     it('sets emojiTag when clicking in emoji picker', async () => {
-      await wrapper.findComponent(EmojiPicker).vm.$emit('click', 'thumbsup');
+      await getEmojiPicker().vm.$emit('click', 'thumbsup');
 
       expect(wrapper.vm.emojiTag).toContain('data-name="thumbsup"');
     });