fix(workspace): eliminate hover height shift on folder tree row with fixed height and opacity fade
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 58s

This commit is contained in:
sandrodach committed 2026-10-27 08:49:08 +01:00
1 parent 5a931e9bb6
commit 7baab8faa2
1 file changed
+20 -11
@@ -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" />