From 75505ab5bf76982ec1140e1e99aac07a28b47362 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Mon, 27 Jul 2026 15:58:48 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20folder=20dropdown=20button=20not=20worki?=
 =?UTF-8?q?ng=20=E2=80=94=20drag=20interference=20+=20button=20too=20small?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Button: draggable={false}, onMouseDown stopPropagation prevents drag swallow
- Button: larger (p-1.5, w-4 h-4), opacity-70, rounded hover bg
- Parent onDragStart: checks if target is Optionen button, prevents drag
- handleMoreClick: currentTarget fallback to closest('button')
- type='button' prevents accidental form submit
---
 .../components/contacts/ContactFolderTree.tsx | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/contacts/ContactFolderTree.tsx b/frontend/src/components/contacts/ContactFolderTree.tsx
index b4511da..c1c50a8 100644
--- a/frontend/src/components/contacts/ContactFolderTree.tsx
+++ b/frontend/src/components/contacts/ContactFolderTree.tsx
@@ -155,6 +155,12 @@ function FolderTreeItem({
       <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';
         }}
@@ -183,12 +189,16 @@ function FolderTreeItem({
           <span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
         )}
         <button
-          onClick={(e) => { e.stopPropagation(); onMoreClick(e, node.id); }}
-          className="opacity-60 group-hover:opacity-100 text-secondary-400 hover:text-primary-600 p-0.5"
+          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-3.5 h-3.5')}
+          {icon(ICONS.more, 'w-4 h-4')}
         </button>
       </div>
 
@@ -243,7 +253,10 @@ export function ContactFolderTree({
   const handleMoreClick = useCallback((e: React.MouseEvent, folderId: string) => {
     e.preventDefault();
     e.stopPropagation();
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    // Robust rect: prefer currentTarget, fallback to target.closest('button')
+    const btn = (e.currentTarget as HTMLElement) || ((e.target as HTMLElement)?.closest('button'));
+    if (!btn) return;
+    const rect = btn.getBoundingClientRect();
     setDropdown({ folderId, anchorRect: rect });
   }, []);