From 7baab8faa2d46ab245b80b7c60bd8358a56a09d7 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 08:49:08 +0100
Subject: [PATCH] fix(workspace): eliminate hover height shift on folder tree
 row with fixed height and opacity fade

---
 .../src/features/workspace/WorkspaceView.tsx  | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 04e69ac..d650a1a 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -107,10 +107,10 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
         }}
         onDrop={(e) => handleDropOnFolder(node.fullPath, e)}
         style={{ paddingLeft: `${depth * 12 + 8}px` }}
-        className={`group flex items-center justify-between pr-2 py-1 rounded-btn text-xs cursor-pointer transition-colors ${
+        className={`group flex items-center justify-between pr-1.5 h-7 rounded-btn text-xs cursor-pointer border-l-2 transition-colors ${
           isDragOver
-            ? 'bg-accent/20 border-l-2 border-accent text-main font-semibold'
-            : 'hover:bg-panel-elevated text-muted'
+            ? 'bg-accent/20 border-accent text-main font-semibold'
+            : 'border-transparent hover:bg-panel-elevated text-muted'
         }`}
       >
         <button
@@ -121,7 +121,7 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
               [node.fullPath]: !prev[node.fullPath],
             }))
           }
-          className="flex items-center gap-1.5 flex-1 min-w-0 text-left cursor-pointer"
+          className="flex items-center gap-1.5 flex-1 min-w-0 text-left h-full cursor-pointer"
         >
           {hasContent ? (
             isExpanded ? (
@@ -146,19 +146,25 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
           </span>
         </button>
 
-        <div className="hidden group-hover:flex items-center gap-0.5">
+        <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity shrink-0">
           <button
             type="button"
-            onClick={() => handleCreateDocument(node.fullPath)}
-            className="p-1 rounded-btn hover:bg-canvas text-muted hover:text-main cursor-pointer"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleCreateDocument(node.fullPath);
+            }}
+            className="p-1 h-6 w-6 flex items-center justify-center rounded-btn hover:bg-canvas text-muted hover:text-main cursor-pointer"
             title="Notiz in diesem Ordner erstellen"
           >
             <Plus className="w-3 h-3" />
           </button>
           <button
             type="button"
-            onClick={() => handleShareFolderClick(node.fullPath, node.sharedFolderObj)}
-            className={`p-1 rounded-btn hover:bg-canvas cursor-pointer ${
+            onClick={(e) => {
+              e.stopPropagation();
+              handleShareFolderClick(node.fullPath, node.sharedFolderObj);
+            }}
+            className={`p-1 h-6 w-6 flex items-center justify-center rounded-btn hover:bg-canvas cursor-pointer ${
               node.sharedFolderObj ? 'text-accent' : 'text-faint hover:text-accent'
             }`}
             title="Ordner teilen und Berechtigungen"
@@ -167,8 +173,11 @@ const FolderTreeItem: React.FC<FolderTreeItemProps> = ({
           </button>
           <button
             type="button"
-            onClick={() => handleDeleteFolder(node.fullPath)}
-            className="p-1 rounded-btn hover:bg-status-err/20 text-faint hover:text-status-err cursor-pointer"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDeleteFolder(node.fullPath);
+            }}
+            className="p-1 h-6 w-6 flex items-center justify-center rounded-btn hover:bg-status-err/20 text-faint hover:text-status-err cursor-pointer"
             title="Ordner löschen"
           >
             <Trash2 className="w-3 h-3" />