From 79406c5775afd23b2695c1c350922d51fe858364 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 6 Sep 2022 10:41:39 +0530
Subject: [PATCH] fix: Emoji picker is not working on the expanded layout
 (#5398)

---
 .../widgets/conversation/MessagesView.vue     | 10 +++----
 .../widgets/conversation/ReplyBox.vue         | 27 +++++++++++++++++++
 .../widget/components/ChatInputWrap.vue       |  6 ++++-
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 6c04879b9..52a43091c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -431,12 +431,12 @@ export default {
       position: fixed;
       left: unset;
       position: absolute;
-    }
 
-    .emoji-dialog::before {
-      transform: rotate(0deg);
-      left: 5px;
-      bottom: var(--space-minus-slab);
+      &::before {
+        transform: rotate(0deg);
+        left: var(--space-half);
+        bottom: var(--space-minus-slab);
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 1eb2a765b..286ac0a88 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -26,6 +26,7 @@
       <emoji-input
         v-if="showEmojiPicker"
         v-on-clickaway="hideEmojiPicker"
+        :class="emojiDialogClassOnExpanedLayout"
         :on-click="emojiOnClick"
       />
       <reply-email-head
@@ -161,6 +162,7 @@ import inboxMixin from 'shared/mixins/inboxMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { DirectUpload } from 'activestorage';
 import { frontendURL } from '../../../helper/URLHelper';
+import wootConstants from 'dashboard/constants';
 
 export default {
   components: {
@@ -388,6 +390,20 @@ export default {
       const selectedTweet = this.selectedTweet || {};
       return selectedTweet.id;
     },
+    isOnExpandedLayout() {
+      const {
+        LAYOUT_TYPES: { CONDENSED },
+      } = wootConstants;
+      const {
+        conversation_display_type: conversationDisplayType = CONDENSED,
+      } = this.uiSettings;
+      return conversationDisplayType !== CONDENSED;
+    },
+    emojiDialogClassOnExpanedLayout() {
+      return this.isOnExpandedLayout && !this.popoutReplyBox
+        ? 'emoji-dialog--expanded'
+        : '';
+    },
     replyToUserLength() {
       const selectedTweet = this.selectedTweet || {};
       const {
@@ -867,7 +883,18 @@ export default {
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));
   }
 }
+.emoji-dialog--expanded {
+  left: unset;
+  bottom: var(--space-jumbo);
+  position: absolute;
+  z-index: var(--z-index-normal);
 
+  &::before {
+    transform: rotate(0deg);
+    left: var(--space-half);
+    bottom: var(--space-minus-slab);
+  }
+}
 .message-signature {
   margin-bottom: 0;
 
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index 4cb3fe043..aa59a4b69 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -189,7 +189,11 @@ export default {
 }
 
 .emoji-dialog {
-  right: $space-one;
+  right: space-smaller;
+
+  &::before {
+    right: $space-one;
+  }
 }
 
 .button-wrap {