From fed578441a7d3ca7da984acfd093f8b2a2146e91 Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Sun, 23 Nov 2025 15:09:28 +0100
Subject: [PATCH] [FEAT] Fix context menu location

---
 src/components/SpriteCanvas.vue | 46 +++++++++++++++------------------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/components/SpriteCanvas.vue b/src/components/SpriteCanvas.vue
index 657b6b2..d31ace8 100644
--- a/src/components/SpriteCanvas.vue
+++ b/src/components/SpriteCanvas.vue
@@ -1,4 +1,22 @@
 <template>
+  <Teleport to="body">
+    <div v-if="showContextMenu" class="fixed bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-xl shadow-2xl z-50 py-2 min-w-[200px] overflow-hidden" :style="{ left: contextMenuX + 'px', top: contextMenuY + 'px' }">
+      <button @click="addSprite" class="w-full px-5 py-3 text-left hover:bg-blue-50 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-3 transition-colors font-medium">
+        <i class="fas fa-plus text-blue-600 dark:text-blue-400"></i>
+        <span>Add Sprite</span>
+      </button>
+      <button v-if="contextMenuSpriteId" @click="replaceSprite" class="w-full px-5 py-3 text-left hover:bg-purple-50 dark:hover:bg-purple-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-3 transition-colors font-medium">
+        <i class="fas fa-exchange-alt text-purple-600 dark:text-purple-400"></i>
+        <span>Replace Sprite</span>
+      </button>
+      <div v-if="contextMenuSpriteId" class="h-px bg-gray-200 dark:bg-gray-600 my-1"></div>
+      <button v-if="contextMenuSpriteId" @click="removeSprite" class="w-full px-5 py-3 text-left hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 flex items-center gap-3 transition-colors font-medium">
+        <i class="fas fa-trash"></i>
+        <span>Remove Sprite</span>
+      </button>
+    </div>
+  </Teleport>
+
   <div class="space-y-6 w-full max-w-full overflow-hidden">
     <div class="bg-cyan-500 dark:bg-cyan-600 rounded-xl p-4 shadow-lg border border-cyan-400/50 dark:border-cyan-500/50">
       <div class="flex items-start gap-3">
@@ -104,22 +122,6 @@
       </div>
     </div>
 
-    <div v-if="showContextMenu" class="absolute bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-xl shadow-2xl z-50 py-2 min-w-[200px] overflow-hidden" :style="{ left: contextMenuX + 'px', top: contextMenuY + 'px' }">
-      <button @click="addSprite" class="w-full px-5 py-3 text-left hover:bg-blue-50 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-3 transition-colors font-medium">
-        <i class="fas fa-plus text-blue-600 dark:text-blue-400"></i>
-        <span>Add Sprite</span>
-      </button>
-      <button v-if="contextMenuSpriteId" @click="replaceSprite" class="w-full px-5 py-3 text-left hover:bg-purple-50 dark:hover:bg-purple-900/30 text-gray-700 dark:text-gray-200 flex items-center gap-3 transition-colors font-medium">
-        <i class="fas fa-exchange-alt text-purple-600 dark:text-purple-400"></i>
-        <span>Replace Sprite</span>
-      </button>
-      <div v-if="contextMenuSpriteId" class="h-px bg-gray-200 dark:bg-gray-600 my-1"></div>
-      <button v-if="contextMenuSpriteId" @click="removeSprite" class="w-full px-5 py-3 text-left hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 flex items-center gap-3 transition-colors font-medium">
-        <i class="fas fa-trash"></i>
-        <span>Remove Sprite</span>
-      </button>
-    </div>
-
     <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="handleFileChange" />
   </div>
 </template>
@@ -311,15 +313,9 @@
       const clickedSprite = findSpriteAtPosition(pos.x, pos.y);
       contextMenuSpriteId.value = clickedSprite?.id || null;
 
-      // Get the root component element to calculate offset
-      const rootElement = canvasRef.value.closest('.space-y-6') as HTMLElement;
-      if (!rootElement) return;
-
-      const rootRect = rootElement.getBoundingClientRect();
-
-      // Position relative to the component root
-      contextMenuX.value = event.clientX - rootRect.left;
-      contextMenuY.value = event.clientY - rootRect.top;
+      // Position context menu at cursor - use clientX/clientY with fixed positioning
+      contextMenuX.value = event.clientX;
+      contextMenuY.value = event.clientY;
 
       showContextMenu.value = true;
       return;