[FEAT] UX enhancements

src/components/SpriteCanvas.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-6">
+  <div class="space-y-6 relative">
     <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">
         <i class="fas fa-lightbulb text-yellow-300 text-xl mt-0.5"></i>
@@ -104,7 +104,7 @@
       </div>
     </div>
 
-    <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' }">
+    <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>
@@ -310,8 +310,17 @@
 
       const clickedSprite = findSpriteAtPosition(pos.x, pos.y);
       contextMenuSpriteId.value = clickedSprite?.id || null;
-      contextMenuX.value = event.clientX;
-      contextMenuY.value = event.clientY;
+
+      // 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;
+
       showContextMenu.value = true;
       return;
     }