From 01040201efcc516ef9f98f432f450e376e929e7d Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Mon, 27 Jul 2026 17:10:00 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20button=20as=20sibling=20of=20draggable?=
 =?UTF-8?q?=20div=20=E2=80=94=20desktop=20drag=20no=20longer=20blocks=20cl?=
 =?UTF-8?q?ick?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/contacts/ContactFolderTree.tsx | 63 +++++++++----------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/contacts/ContactFolderTree.tsx b/frontend/src/components/contacts/ContactFolderTree.tsx
index 3d23ffe..05935e4 100644
--- a/frontend/src/components/contacts/ContactFolderTree.tsx
+++ b/frontend/src/components/contacts/ContactFolderTree.tsx
@@ -152,40 +152,39 @@ function FolderTreeItem({
 
   return (
     <div>
-      <div
-        draggable
-        onDragStart={(e) => {
-          e.dataTransfer.setData('text/folder-id', node.id);
-          e.dataTransfer.effectAllowed = 'move';
-        }}
-        onDragOver={(e) => onDragOver(e, node.id)}
-        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',
-          'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
-          isDragOver
-            ? 'bg-primary-100 ring-2 ring-primary-400'
-            : isActive
-            ? 'bg-primary-50 text-primary-700'
-            : 'text-secondary-700 hover:bg-secondary-100',
-        )}
-        style={{ paddingLeft: depth * 12 + 8 }}
-        onClick={() => {
-          setExpanded(!expanded);
-          onSelectFolder(node.id);
-        }}
-      >
-        {chevron(expanded)}
-        {icon(ICONS.folder, 'w-4 h-4 text-secondary-400')}
-        <span className="flex-1 truncate">{node.name}</span>
-        {node.contact_count > 0 && (
-          <span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
-        )}
+      <div className="flex items-center" style={{ paddingLeft: depth * 12 + 8 }}>
+        <div
+          draggable
+          onDragStart={(e) => {
+            e.dataTransfer.setData('text/folder-id', node.id);
+            e.dataTransfer.effectAllowed = 'move';
+          }}
+          onDragOver={(e) => onDragOver(e, node.id)}
+          onDragLeave={() => onDragLeave(node.id)}
+          onDrop={(e) => onDrop(e, node.id)}
+          className={clsx(
+            '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',
+            'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+            isDragOver
+              ? 'bg-primary-100 ring-2 ring-primary-400'
+              : isActive
+              ? 'bg-primary-50 text-primary-700'
+              : 'text-secondary-700 hover:bg-secondary-100',
+          )}
+          onClick={() => {
+            setExpanded(!expanded);
+            onSelectFolder(node.id);
+          }}
+        >
+          {chevron(expanded)}
+          {icon(ICONS.folder, 'w-4 h-4 text-secondary-400')}
+          <span className="flex-1 truncate">{node.name}</span>
+          {node.contact_count > 0 && (
+            <span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
+          )}
+        </div>
         <button
           type="button"
-          draggable={false}
-          onPointerDown={(e) => { e.stopPropagation(); }}
           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"
           title="Optionen"