feat: add DragOverlay to SequencerPage for improved drag-and-drop feedback

src/components/sequencer/SoundLibrary.tsx

@@ -31,7 +31,6 @@ function DraggableSound({ sound }: DraggableSoundProps) {
     attributes,
     listeners,
     setNodeRef,
-    transform,
     isDragging,
   } = useDraggable({
     id: `sound-${sound.id}`,
@@ -41,9 +40,8 @@ function DraggableSound({ sound }: DraggableSoundProps) {
     },
   })
 
-  const style = transform ? {
-    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-  } : undefined
+  // Don't apply transform to prevent layout shift - DragOverlay handles the visual feedback
+  const style = undefined
 
   const formatDuration = (ms: number): string => {
     const seconds = Math.floor(ms / 1000)
@@ -66,7 +64,7 @@ function DraggableSound({ sound }: DraggableSoundProps) {
       className={`
         group cursor-grab active:cursor-grabbing
         p-3 border rounded-lg bg-card hover:bg-accent/50 transition-colors
-        ${isDragging ? 'opacity-50 shadow-lg' : ''}
+        ${isDragging ? 'opacity-30' : ''}
       `}
       title={`Drag to add "${sound.name || sound.filename}" to a track`}
     >