fix: Wrap chat context menu in Teleport to fix position inside dialogs

src/components/OrderChat.vue

@@ -26,15 +26,17 @@
     </div>
 
     <!-- Context Menu -->
-    <div v-if="contextMenu.visible" 
-         class="fixed z-[200] bg-card/90 backdrop-blur-md border border-border/50 shadow-xl rounded-xl py-1 min-w-[120px] animate-in fade-in zoom-in-95 duration-100"
-         :style="{ top: `${contextMenu.y}px`, left: `${contextMenu.x}px` }"
-         @click.stop>
-      <button @click="deleteMessage(contextMenu.msgId)" 
-              class="w-full text-left px-4 py-2 text-sm text-rose-500 hover:bg-rose-500/10 font-bold transition-colors flex items-center gap-2">
-        <Trash2 class="w-4 h-4" /> {{ t("admin.actions.delete") }}
-      </button>
-    </div>
+    <Teleport to="body">
+      <div v-if="contextMenu.visible" 
+           class="fixed z-[9999] bg-card/95 backdrop-blur-md border border-border/50 shadow-2xl rounded-xl py-1 min-w-[140px] animate-in fade-in zoom-in-95 duration-100"
+           :style="{ top: `${contextMenu.y}px`, left: `${contextMenu.x}px` }"
+           @click.stop>
+        <button @click="deleteMessage(contextMenu.msgId)" 
+                class="w-full text-left px-4 py-2.5 text-sm text-rose-500 hover:bg-rose-500/10 font-bold transition-colors flex items-center gap-2">
+          <Trash2 class="w-4 h-4" /> {{ t("admin.actions.delete") }}
+        </button>
+      </div>
+    </Teleport>
 
     <!-- Messages area -->
     <div ref="messagesContainer" class="flex-1 overflow-y-auto px-4 py-3 space-y-3 scrollbar-thin">
@@ -149,10 +151,10 @@ const openContextMenu = (e: MouseEvent, msg: any) => {
   if (myRole !== 'admin' && !isMine) return; // Users can only delete their own messages, Admin can delete any
   
   // Keep menu on screen
-  let x = e.clientX;
-  let y = e.clientY;
-  if (window.innerWidth - x < 150) x -= 120;
-  if (window.innerHeight - y < 100) y -= 50;
+  let x = e.clientX ?? (e as any).touches?.[0]?.clientX ?? 0;
+  let y = e.clientY ?? (e as any).touches?.[0]?.clientY ?? 0;
+  if (window.innerWidth - x < 150) x -= 140;
+  if (window.innerHeight - y < 100) y -= 60;
 
   contextMenu.value = { visible: true, x, y, msgId: msg.id };
 };