chore: Minor fix

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -1,12 +1,5 @@
 <script setup>
-import {
-  computed,
-  useTemplateRef,
-  ref,
-  onMounted,
-  reactive,
-  inject,
-} from 'vue';
+import { computed, useTemplateRef, ref, onMounted, reactive } from 'vue';
 import { Letter } from 'vue-letter';
 import { allowedCssProperties } from 'lettersanitizer';
 import { useToggle } from '@vueuse/core';
@@ -40,7 +33,6 @@ const contentContainer = useTemplateRef('contentContainer');
 // Forward form - managed locally but can be triggered by parent
 const [showForwardMessageModal, toggleForwardModal] = useToggle();
 const forwardFormPosition = reactive({ top: 0, right: 0 });
-const conversationPanelRef = inject('conversationPanelRef', null);
 
 onMounted(() => {
   isExpandable.value = contentContainer.value?.scrollHeight > 400;
@@ -236,7 +228,6 @@ defineExpose({
       v-if="showForwardMessageModal"
       :x="forwardFormPosition.x"
       :y="forwardFormPosition.y"
-      :scroll-lock-element="conversationPanelRef?.$el"
       @close="closeForwardModal"
     >
       <ForwardMessageForm

app/javascript/dashboard/components/ui/ContextMenu.vue

@@ -5,6 +5,7 @@ import {
   nextTick,
   onUnmounted,
   useTemplateRef,
+  inject,
 } from 'vue';
 import { useWindowSize, useElementBounding, useScrollLock } from '@vueuse/core';
 
@@ -13,14 +14,18 @@ import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirecti
 const props = defineProps({
   x: { type: Number, default: 0 },
   y: { type: Number, default: 0 },
-  scrollLockElement: { type: [HTMLElement, null], default: null },
 });
 
 const emit = defineEmits(['close']);
 
+const elementToLock = inject('contextMenuElementTarget', null);
+
 const menuRef = useTemplateRef('menuRef');
 
-const scrollLockElement = computed(() => props.scrollLockElement);
+const scrollLockElement = computed(() => {
+  if (!elementToLock?.value) return null;
+  return elementToLock.value.$el;
+});
 
 const isLocked = useScrollLock(scrollLockElement);
 

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -101,7 +101,7 @@ export default {
       FEATURE_FLAGS.CHATWOOT_V4
     );
 
-    provide('conversationPanelRef', conversationPanelRef);
+    provide('contextMenuElementTarget', conversationPanelRef);
 
     return {
       isEnterprise,

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -1,6 +1,5 @@
 <script>
 import { useAlert } from 'dashboard/composables';
-import { inject } from 'vue';
 import { mapGetters } from 'vuex';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
@@ -48,10 +47,9 @@ export default {
   emits: ['open', 'close', 'replyTo', 'forwardEmail'],
   setup() {
     const { getPlainText } = useMessageFormatter();
-    const conversationPanelRef = inject('conversationPanelRef', null);
+
     return {
       getPlainText,
-      conversationPanelRef,
     };
   },
   data() {
@@ -65,9 +63,6 @@ export default {
       getAccount: 'accounts/getAccount',
       currentAccountId: 'getCurrentAccountId',
     }),
-    conversationPanelElement() {
-      return this.conversationPanelRef?.$el;
-    },
     plainTextContent() {
       return this.getPlainText(this.messageContent);
     },
@@ -203,7 +198,6 @@ export default {
       v-if="isOpen && !isCannedResponseModalOpen"
       :x="contextMenuPosition.x"
       :y="contextMenuPosition.y"
-      :scroll-lock-element="conversationPanelElement"
       @close="handleClose"
     >
       <div class="menu-container">