From 137c6f8a758c0b9fbbe8726b31048585887e6dbb Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 22 Jan 2025 17:56:43 +0530
Subject: [PATCH] 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
---
 .../dashboard/components/ui/ContextMenu.vue   | 61 ++++++++++++++-----
 .../contextMenu/menuItemWithSubmenu.vue       | 52 ++++++++++++----
 2 files changed, 86 insertions(+), 27 deletions(-)

diff --git a/app/javascript/dashboard/components/ui/ContextMenu.vue b/app/javascript/dashboard/components/ui/ContextMenu.vue
index 48fa7acf1..8b77ce254 100644
--- a/app/javascript/dashboard/components/ui/ContextMenu.vue
+++ b/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')"
     >
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
index 6d0a26d52..a601c92d3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
@@ -1,20 +1,45 @@
-<script>
-export default {
-  props: {
-    option: {
-      type: Object,
-      default: () => {},
-    },
-    subMenuAvailable: {
-      type: Boolean,
-      default: true,
-    },
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import { useWindowSize, useElementBounding } from '@vueuse/core';
+
+defineProps({
+  option: {
+    type: Object,
+    default: () => {},
   },
-};
+  subMenuAvailable: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const menuRef = useTemplateRef('menuRef');
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+const { bottom, right } = useElementBounding(menuRef);
+
+// Vertical position
+const verticalPosition = computed(() => {
+  const SUBMENU_HEIGHT = 240; // 15rem in pixels
+  const spaceBelow = windowHeight.value - bottom.value;
+  return spaceBelow < SUBMENU_HEIGHT ? 'bottom-0' : 'top-0';
+});
+
+// Horizontal position
+const horizontalPosition = computed(() => {
+  const SUBMENU_WIDTH = 240;
+  const spaceRight = windowWidth.value - right.value;
+  return spaceRight < SUBMENU_WIDTH ? 'right-full' : 'left-full';
+});
+
+const submenuPosition = computed(() => [
+  verticalPosition.value,
+  horizontalPosition.value,
+]);
 </script>
 
 <template>
   <div
+    ref="menuRef"
     class="text-slate-800 dark:text-slate-100 menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-n-alpha-3/50 backdrop-blur-[100px] justify-between hover:bg-n-brand/10 cursor-pointer dark:hover:bg-n-solid-3"
     :class="!subMenuAvailable ? 'opacity-50 cursor-not-allowed' : ''"
   >
@@ -25,7 +50,8 @@ export default {
     <fluent-icon icon="chevron-right" size="12" />
     <div
       v-if="subMenuAvailable"
-      class="submenu bg-n-alpha-3 backdrop-blur-[100px] p-1 shadow-lg rounded-md absolute left-full top-0 hidden min-h-min max-h-[15rem] overflow-y-auto overflow-x-hidden cursor-pointer"
+      class="submenu bg-n-alpha-3 backdrop-blur-[100px] p-1 shadow-lg rounded-md absolute hidden max-h-[15rem] overflow-y-auto overflow-x-hidden cursor-pointer"
+      :class="submenuPosition"
     >
       <slot />
     </div>