diff --git a/frontend/src/components/contacts/ContactFolderTree.tsx b/frontend/src/components/contacts/ContactFolderTree.tsx index b4525b3..998c32b 100644 --- a/frontend/src/components/contacts/ContactFolderTree.tsx +++ b/frontend/src/components/contacts/ContactFolderTree.tsx @@ -151,18 +151,13 @@ function FolderTreeItem({ const isActive = selectedFilter === folderKey; return ( -
+
{ - e.dataTransfer.setData('text/folder-id', node.id); - e.dataTransfer.effectAllowed = 'move'; - }} onDragOver={(e) => onDragOver(e, node.id)} onDragLeave={() => onDragLeave(node.id)} onDrop={(e) => onDrop(e, node.id)} className={clsx( - 'group relative flex items-center gap-1.5 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer min-h-touch', + 'group flex items-center gap-1.5 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer min-h-touch', 'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', isDragOver ? 'bg-primary-100 ring-2 ring-primary-400' @@ -176,26 +171,31 @@ function FolderTreeItem({ onSelectFolder(node.id); }} > - {chevron(expanded)} - {icon(ICONS.folder, 'w-4 h-4 text-secondary-400')} - {node.name} - {node.contact_count > 0 && ( - {node.contact_count} - )} - {/* Spacer for the absolutely-positioned button */} - + { + e.dataTransfer.setData('text/folder-id', node.id); + e.dataTransfer.effectAllowed = 'move'; + }} + className="flex items-center gap-1.5 flex-1 min-w-0" + > + {chevron(expanded)} + {icon(ICONS.folder, 'w-4 h-4 text-secondary-400')} + {node.name} + {node.contact_count > 0 && ( + {node.contact_count} + )} + +
- {/* More-options button — OUTSIDE the draggable div to prevent drag interference */} - {expanded && node.children.map((child) => (