diff --git a/website/client/src/components/chat/emojiAutoComplete.vue b/website/client/src/components/chat/emojiAutoComplete.vue
index 5b41c44811..8d11eab45c 100644
--- a/website/client/src/components/chat/emojiAutoComplete.vue
+++ b/website/client/src/components/chat/emojiAutoComplete.vue
@@ -70,17 +70,12 @@ export default {
   },
   computed: {
     autocompleteStyle () {
-      function heightToUse (textBox, topCoords) {
-        const textBoxHeight = textBox.clientHeight;
-        return topCoords < textBoxHeight ? topCoords + 30 : textBoxHeight + 10;
-      }
+      const top = this.textbox.offsetTop + this.textbox.offsetHeight + 2;
       return {
-        top: `${heightToUse(this.textbox, this.coords.TOP)}px`,
-        left: `${this.coords.LEFT + 30}px`,
-        marginLeft: '-28px',
-        marginTop: '28px',
+        top: `${top}px`,
+        left: `${this.textbox.offsetLeft}px`,
         position: 'absolute',
-        minWidth: '100px',
+        minWidth: '150px',
         zIndex: 100,
         backgroundColor: 'white',
       };
diff --git a/website/client/src/pages/private-messages/index.vue b/website/client/src/pages/private-messages/index.vue
index f3dd2ee699..aa03452303 100644
--- a/website/client/src/pages/private-messages/index.vue
+++ b/website/client/src/pages/private-messages/index.vue
@@ -982,8 +982,16 @@ export default defineComponent({
       }
     },
   },
+  watch: {
+    shouldShowInputPanel (val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.textbox = this.$refs.textarea;
+        });
+      }
+    },
+  },
   async mounted () {
-    this.textbox = this.$refs.textarea;
     this.$store.dispatch('common:setTitle', {
       section: this.$t('messages'),
     });