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

frontend/src/components/contacts/ContactFolderTree.tsx

@@ -151,18 +151,13 @@ function FolderTreeItem({
   const isActive = selectedFilter === folderKey;
 
   return (
-    <div className="relative">
+    <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 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',
           isDragOver
             ? 'bg-primary-100 ring-2 ring-primary-400'
@@ -176,26 +171,31 @@ function FolderTreeItem({
           onSelectFolder(node.id);
         }}
       >
-        {chevron(expanded)}
+        <span
-        {icon(ICONS.folder, 'w-4 h-4 text-secondary-400')}
+          draggable
-        <span className="flex-1 truncate">{node.name}</span>
+          onDragStart={(e) => {
-        {node.contact_count > 0 && (
+            e.dataTransfer.setData('text/folder-id', node.id);
-          <span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
+            e.dataTransfer.effectAllowed = 'move';
-        )}
+          }}
-        {/* Spacer for the absolutely-positioned button */}
+          className="flex items-center gap-1.5 flex-1 min-w-0"
-        <span className="w-7 h-7 flex-shrink-0" />
+        >
+          {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>
+          )}
+        </span>
+        <button
+          type="button"
+          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"
+          aria-label="Optionen"
+        >
+          {icon(ICONS.more, 'w-4 h-4')}
+        </button>
       </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