fix: button as sibling of draggable div — desktop drag no longer blocks click

This commit is contained in:
Agent Zero
2026-07-27 17:10:00 +02:00
parent 4a3e4cd0a4
commit 01040201ef
@@ -152,40 +152,39 @@ function FolderTreeItem({
return ( return (
<div> <div>
<div <div className="flex items-center" style={{ paddingLeft: depth * 12 + 8 }}>
draggable <div
onDragStart={(e) => { draggable
e.dataTransfer.setData('text/folder-id', node.id); onDragStart={(e) => {
e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/folder-id', node.id);
}} e.dataTransfer.effectAllowed = 'move';
onDragOver={(e) => onDragOver(e, node.id)} }}
onDragLeave={() => onDragLeave(node.id)} onDragOver={(e) => onDragOver(e, node.id)}
onDrop={(e) => onDrop(e, node.id)} onDragLeave={() => onDragLeave(node.id)}
className={clsx( onDrop={(e) => onDrop(e, node.id)}
'group flex items-center gap-1.5 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer min-h-touch', className={clsx(
'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', 'group flex items-center gap-1.5 flex-1 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer min-h-touch',
isDragOver 'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
? 'bg-primary-100 ring-2 ring-primary-400' isDragOver
: isActive ? 'bg-primary-100 ring-2 ring-primary-400'
? 'bg-primary-50 text-primary-700' : isActive
: 'text-secondary-700 hover:bg-secondary-100', ? 'bg-primary-50 text-primary-700'
)} : 'text-secondary-700 hover:bg-secondary-100',
style={{ paddingLeft: depth * 12 + 8 }} )}
onClick={() => { onClick={() => {
setExpanded(!expanded); setExpanded(!expanded);
onSelectFolder(node.id); onSelectFolder(node.id);
}} }}
> >
{chevron(expanded)} {chevron(expanded)}
{icon(ICONS.folder, 'w-4 h-4 text-secondary-400')} {icon(ICONS.folder, 'w-4 h-4 text-secondary-400')}
<span className="flex-1 truncate">{node.name}</span> <span className="flex-1 truncate">{node.name}</span>
{node.contact_count > 0 && ( {node.contact_count > 0 && (
<span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span> <span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
)} )}
</div>
<button <button
type="button" type="button"
draggable={false}
onPointerDown={(e) => { e.stopPropagation(); }}
onClick={(e) => { e.stopPropagation(); e.preventDefault(); onMoreClick(e, node.id); }} onClick={(e) => { e.stopPropagation(); e.preventDefault(); onMoreClick(e, node.id); }}
className="flex-shrink-0 text-secondary-400 hover:text-primary-600 p-1.5 rounded hover:bg-secondary-100 transition-colors touch-manipulation" className="flex-shrink-0 text-secondary-400 hover:text-primary-600 p-1.5 rounded hover:bg-secondary-100 transition-colors touch-manipulation"
title="Optionen" title="Optionen"