From bb487932173e95fa6ab61b38db83e065732e4749 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Mon, 27 Jul 2026 16:28:24 +0200
Subject: [PATCH] fix: move more-options button outside draggable div to fix
 click
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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)
---
 .../components/contacts/ContactFolderTree.tsx | 35 ++++++++-----------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/contacts/ContactFolderTree.tsx b/frontend/src/components/contacts/ContactFolderTree.tsx
index c1c50a8..b4525b3 100644
--- a/frontend/src/components/contacts/ContactFolderTree.tsx
+++ b/frontend/src/components/contacts/ContactFolderTree.tsx
@@ -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