fix: Context menu and its submenu boundary overflow (#10729)

# Pull Request Template

## Description

This PR adds smart positioning to prevent context menu and submenu from
overflowing screen boundaries. The context menu and its submenu now
dynamically adjust their position when there isn't enough space.


Fixes
https://linear.app/chatwoot/issue/CW-3936/assign-to-agent-ui-element-is-drawn-off-canvas
https://github.com/chatwoot/chatwoot/issues/10727

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?
**Loom video**

**Before**

https://www.loom.com/share/6c267dde103c4f2281ed5b4d006a43b1?sid=047966f5-d6d3-4de6-ade8-270141e6e215

**After**

https://www.loom.com/share/5599c6061bb74c3ea527dd06960d3189?sid=ffb01149-bb7a-449e-b0ec-02cc191f472b


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

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

@@ -1,34 +1,67 @@
 <script setup>
-import { ref, computed, onMounted, nextTick, defineEmits } from 'vue';
+import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
+import { useWindowSize, useElementBounding } from '@vueuse/core';
 
-const { x, y } = defineProps({
+const props = defineProps({
   x: { type: Number, default: 0 },
   y: { type: Number, default: 0 },
 });
+
 const emit = defineEmits(['close']);
 
-const left = ref(x);
-const top = ref(y);
+const menuRef = useTemplateRef('menuRef');
 
-const style = computed(() => ({
-  top: top.value + 'px',
-  left: left.value + 'px',
-}));
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+const { width: menuWidth, height: menuHeight } = useElementBounding(menuRef);
+
+const calculatePosition = (x, y, menuW, menuH, windowW, windowH) => {
+  // Initial position
+  let left = x;
+  let top = y;
+
+  // Boundary checks
+  const isOverflowingRight = left + menuW > windowW;
+  const isOverflowingBottom = top + menuH > windowH;
+
+  // Adjust position if overflowing
+  if (isOverflowingRight) left = windowW - menuW;
+  if (isOverflowingBottom) top = windowH - menuH;
+
+  return {
+    left: Math.max(0, left),
+    top: Math.max(0, top),
+  };
+};
+
+const position = computed(() => {
+  if (!menuRef.value) return { top: `${props.y}px`, left: `${props.x}px` };
+
+  const { left, top } = calculatePosition(
+    props.x,
+    props.y,
+    menuWidth.value,
+    menuHeight.value,
+    windowWidth.value,
+    windowHeight.value
+  );
+
+  return {
+    top: `${top}px`,
+    left: `${left}px`,
+  };
+});
 
-const target = ref();
 onMounted(() => {
-  nextTick(() => {
-    target.value.focus();
-  });
+  nextTick(() => menuRef.value?.focus());
 });
 </script>
 
 <template>
   <Teleport to="body">
     <div
-      ref="target"
+      ref="menuRef"
       class="fixed outline-none z-[9999] cursor-pointer"
-      :style="style"
+      :style="position"
       tabindex="0"
       @blur="emit('close')"
     >