From 5019563c382d60f9e5ec5bd165516af87cf8861e Mon Sep 17 00:00:00 2001 From: Zac Gaetano Date: Tue, 19 May 2026 14:45:47 -0400 Subject: [PATCH] fix: override user-select:none on draggable media items to fix drag initiation EditorInterface root div has select-none (user-select:none) applied globally to prevent text selection during editing. Chrome/Safari refuse to start HTML5 drag-and-drop on elements that inherit user-select:none, which is why no ghost image appeared, cursor never changed, and no dragstart events fired. Fix: add select-text (user-select:text) to both draggable divs in MediaThumbnail (list view and grid view). This overrides the inherited none specifically on the elements that need to be dragged, without changing the global UX behavior of the editor. --- .../editor/apps/web/src/components/editor/AssetsPanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/services/editor/apps/web/src/components/editor/AssetsPanel.tsx b/services/editor/apps/web/src/components/editor/AssetsPanel.tsx index 0117c05..4d2eaf4 100644 --- a/services/editor/apps/web/src/components/editor/AssetsPanel.tsx +++ b/services/editor/apps/web/src/components/editor/AssetsPanel.tsx @@ -249,7 +249,7 @@ const MediaThumbnail: React.FC<{ onDoubleClick={(e) => { e.stopPropagation(); onAddToTimeline(); }} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} - className={`flex items-center gap-3 px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all group ${borderClass}`} + className={`select-text flex items-center gap-3 px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all group ${borderClass}`} > {/* Small thumbnail */}
@@ -400,7 +400,7 @@ const MediaThumbnail: React.FC<{ }} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} - className={`aspect-video bg-background-tertiary rounded-lg border-2 relative group cursor-pointer transition-all overflow-hidden shadow-sm ${borderClass}`} + className={`select-text aspect-video bg-background-tertiary rounded-lg border-2 relative group cursor-pointer transition-all overflow-hidden shadow-sm ${borderClass}`} > {/* Thumbnail or placeholder */} {item.thumbnailUrl ? (