fix: move more-options button outside draggable div to fix click

- Button was inside draggable div — browser started drag instead of click
- Button is now absolutely positioned outside the draggable div
- Outer div has position:relative for correct button placement
- Spacer span reserves space for the button in the layout
- Works on all screen sizes (desktop, tablet, mobile)
This commit is contained in:
Agent Zero
2026-07-27 16:28:24 +02:00
parent 75505ab5bf
commit bb48793217
@@ -151,16 +151,10 @@ function FolderTreeItem({
const isActive = selectedFilter === folderKey;
return (
<div>
<div className="relative">
<div
draggable
onDragStart={(e) => {
// Prevent drag when the click originated from the more-options button
const target = e.target as HTMLElement;
if (target.tagName === 'BUTTON' || target.closest('button[aria-label="Optionen"]')) {
e.preventDefault();
return;
}
e.dataTransfer.setData('text/folder-id', node.id);
e.dataTransfer.effectAllowed = 'move';
}}
@@ -168,7 +162,7 @@ function FolderTreeItem({
onDragLeave={() => onDragLeave(node.id)}
onDrop={(e) => onDrop(e, node.id)}
className={clsx(
'group flex items-center gap-1.5 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer min-h-touch',
'group relative 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'
@@ -188,19 +182,20 @@ function FolderTreeItem({
{node.contact_count > 0 && (
<span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
)}
<button
type="button"
draggable={false}
onMouseDown={(e) => { e.stopPropagation(); }}
onDragStart={(e) => { e.preventDefault(); e.stopPropagation(); }}
onClick={(e) => { e.stopPropagation(); e.preventDefault(); onMoreClick(e, node.id); }}
className="flex-shrink-0 opacity-70 group-hover:opacity-100 text-secondary-400 hover:text-primary-600 p-1.5 rounded hover:bg-secondary-100 transition-opacity touch-manipulation"
title="Optionen"
aria-label="Optionen"
>
{icon(ICONS.more, 'w-4 h-4')}
</button>
{/* Spacer for the absolutely-positioned button */}
<span className="w-7 h-7 flex-shrink-0" />
</div>
{/* More-options button — OUTSIDE the draggable div to prevent drag interference */}
<button
type="button"
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"
style={{ pointerEvents: 'auto' }}
title="Optionen"
aria-label="Optionen"
>
{icon(ICONS.more, 'w-4 h-4')}
</button>
{expanded && node.children.map((child) => (
<FolderTreeItem