From fd6693ee17c06d4f1807360711f9e024da269f3e Mon Sep 17 00:00:00 2001
From: Zac Gaetano <zgaetano@wilddragon.net>
Date: Tue, 19 May 2026 13:00:09 -0400
Subject: [PATCH] fix: remove ContextMenuTrigger asChild from draggable
 elements to fix drag initiation

With asChild, Radix merges its pointer event handlers directly onto the
draggable div. This interferes with browser drag gesture initiation,
resulting in no ghost image and no drag events firing.

Fix: remove asChild so ContextMenuTrigger renders its own span (with
display:contents to preserve layout). Radix handlers now live on the
ancestor span, not the draggable div. Right-click still bubbles up to
trigger the context menu correctly.

Also add draggable={false} to <img> elements inside draggable divs
to prevent browser native image drag from competing with the parent.
---
 .../editor/apps/web/src/components/editor/AssetsPanel.tsx  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/services/editor/apps/web/src/components/editor/AssetsPanel.tsx b/services/editor/apps/web/src/components/editor/AssetsPanel.tsx
index f532b03..0117c05 100644
--- a/services/editor/apps/web/src/components/editor/AssetsPanel.tsx
+++ b/services/editor/apps/web/src/components/editor/AssetsPanel.tsx
@@ -240,7 +240,7 @@ const MediaThumbnail: React.FC<{
   if (viewMode === "list") {
     return (
       <ContextMenu>
-        <ContextMenuTrigger asChild>
+        <ContextMenuTrigger style={{ display: 'contents' }}>
       <div
         draggable
         onDragStart={onDragStart}
@@ -254,7 +254,7 @@ const MediaThumbnail: React.FC<{
         {/* Small thumbnail */}
         <div className="w-12 h-8 rounded bg-background-tertiary relative overflow-hidden flex-shrink-0">
           {item.thumbnailUrl ? (
-            <img src={item.thumbnailUrl} alt={item.name} className="w-full h-full object-cover" />
+            <img src={item.thumbnailUrl} alt={item.name} className="w-full h-full object-cover" draggable={false} />
           ) : (
             <div className="w-full h-full flex items-center justify-center">
               <Icon size={14} className={iconColor} />
@@ -386,7 +386,7 @@ const MediaThumbnail: React.FC<{
 
   return (
     <ContextMenu>
-      <ContextMenuTrigger asChild>
+      <ContextMenuTrigger style={{ display: 'contents' }}>
     <div className="flex flex-col">
       {/* Thumbnail container */}
       <div
@@ -408,6 +408,7 @@ const MediaThumbnail: React.FC<{
             src={item.thumbnailUrl}
             alt={item.name}
             className="w-full h-full object-cover"
+            draggable={false}
           />
         ) : (
           <div className="absolute inset-0 flex items-center justify-center bg-background-tertiary">