fix: button in normal flow, only inner span draggable — fixes dropdown position and icon shift

This commit is contained in:
Agent Zero
2026-07-27 16:35:13 +02:00
parent bb48793217
commit 470e183ade
@@ -151,18 +151,13 @@ function FolderTreeItem({
const isActive = selectedFilter === folderKey; const isActive = selectedFilter === folderKey;
return ( return (
<div className="relative"> <div>
<div <div
draggable
onDragStart={(e) => {
e.dataTransfer.setData('text/folder-id', node.id);
e.dataTransfer.effectAllowed = 'move';
}}
onDragOver={(e) => onDragOver(e, node.id)} onDragOver={(e) => onDragOver(e, node.id)}
onDragLeave={() => onDragLeave(node.id)} onDragLeave={() => onDragLeave(node.id)}
onDrop={(e) => onDrop(e, node.id)} onDrop={(e) => onDrop(e, node.id)}
className={clsx( 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', 'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
isDragOver isDragOver
? 'bg-primary-100 ring-2 ring-primary-400' ? 'bg-primary-100 ring-2 ring-primary-400'
@@ -175,6 +170,14 @@ function FolderTreeItem({
setExpanded(!expanded); setExpanded(!expanded);
onSelectFolder(node.id); onSelectFolder(node.id);
}} }}
>
<span
draggable
onDragStart={(e) => {
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)} {chevron(expanded)}
{icon(ICONS.folder, 'w-4 h-4 text-secondary-400')} {icon(ICONS.folder, 'w-4 h-4 text-secondary-400')}
@@ -182,20 +185,17 @@ function FolderTreeItem({
{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>
)} )}
{/* Spacer for the absolutely-positioned button */} </span>
<span className="w-7 h-7 flex-shrink-0" />
</div>
{/* More-options button — OUTSIDE the draggable div to prevent drag interference */}
<button <button
type="button" type="button"
onClick={(e) => { e.stopPropagation(); e.preventDefault(); onMoreClick(e, node.id); }} onClick={(e) => { e.stopPropagation(); e.preventDefault(); onMoreClick(e, node.id); }}
className="absolute right-1 top-1/2 -translate-y-1/2 z-10 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"
style={{ pointerEvents: 'auto' }}
title="Optionen" title="Optionen"
aria-label="Optionen" aria-label="Optionen"
> >
{icon(ICONS.more, 'w-4 h-4')} {icon(ICONS.more, 'w-4 h-4')}
</button> </button>
</div>
{expanded && node.children.map((child) => ( {expanded && node.children.map((child) => (
<FolderTreeItem <FolderTreeItem