feat: Scroll lock on message context menu (#11454)

This PR uses `useScrollLock` from `VueUse` to lock scrolling on the
conversation panel when the message context menu is open.

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

@@ -1,6 +1,13 @@
 <script setup>
-import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
-import { useWindowSize, useElementBounding } from '@vueuse/core';
+import {
+  computed,
+  onMounted,
+  nextTick,
+  onUnmounted,
+  useTemplateRef,
+  inject,
+} from 'vue';
+import { useWindowSize, useElementBounding, useScrollLock } from '@vueuse/core';
 
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
 
@@ -11,27 +18,34 @@ const props = defineProps({
 
 const emit = defineEmits(['close']);
 
+const elementToLock = inject('contextMenuElementTarget', null);
+
 const menuRef = useTemplateRef('menuRef');
 
+const scrollLockElement = computed(() => {
+  if (!elementToLock?.value) return null;
+  return elementToLock.value?.$el;
+});
+
+const isLocked = useScrollLock(scrollLockElement);
+
 const { width: windowWidth, height: windowHeight } = useWindowSize();
 const { width: menuWidth, height: menuHeight } = useElementBounding(menuRef);
 
 const calculatePosition = (x, y, menuW, menuH, windowW, windowH) => {
+  const PADDING = 16;
   // Initial position
   let left = x;
   let top = y;
-
   // Boundary checks
-  const isOverflowingRight = left + menuW > windowW;
-  const isOverflowingBottom = top + menuH > windowH;
-
+  const isOverflowingRight = left + menuW > windowW - PADDING;
+  const isOverflowingBottom = top + menuH > windowH - PADDING;
   // Adjust position if overflowing
-  if (isOverflowingRight) left = windowW - menuW;
-  if (isOverflowingBottom) top = windowH - menuH;
-
+  if (isOverflowingRight) left = windowW - menuW - PADDING;
+  if (isOverflowingBottom) top = windowH - menuH - PADDING;
   return {
-    left: Math.max(0, left),
-    top: Math.max(0, top),
+    left: Math.max(PADDING, left),
+    top: Math.max(PADDING, top),
   };
 };
 
@@ -54,8 +68,18 @@ const position = computed(() => {
 });
 
 onMounted(() => {
+  isLocked.value = true;
   nextTick(() => menuRef.value?.focus());
 });
+
+const handleClose = () => {
+  isLocked.value = false;
+  emit('close');
+};
+
+onUnmounted(() => {
+  isLocked.value = false;
+});
 </script>
 
 <template>
@@ -65,7 +89,7 @@ onMounted(() => {
       class="fixed outline-none z-[9999] cursor-pointer"
       :style="position"
       tabindex="0"
-      @blur="emit('close')"
+      @blur="handleClose"
     >
       <slot />
     </div>