Add tooltip for truncated folder names in File Manager

Long folder names are truncated to prevent layout issues. Added title
attribute so users can hover to see the full folder name.

Fixes #160
This commit is contained in:
maziggy
2026-01-27 09:07:18 +01:00
parent d0cc282d3e
commit 60d9505c0d
4 changed files with 8 additions and 8 deletions
+4 -4
View File
@@ -704,7 +704,7 @@ function FolderTreeItem({ folder, selectedFolderId, onSelect, onDelete, onLink,
return (
<div>
<div
className={`group flex items-start gap-1 px-2 py-1.5 rounded cursor-pointer transition-colors ${
className={`group flex items-center gap-1 px-2 py-1.5 rounded cursor-pointer transition-colors ${
selectedFolderId === folder.id
? 'bg-bambu-green/20 text-bambu-green'
: 'hover:bg-bambu-dark text-white'
@@ -718,15 +718,15 @@ function FolderTreeItem({ folder, selectedFolderId, onSelect, onDelete, onLink,
e.stopPropagation();
setExpanded(!expanded);
}}
className="p-0.5 hover:bg-bambu-dark-tertiary rounded flex-shrink-0"
className="p-0.5 hover:bg-bambu-dark-tertiary rounded"
>
<ChevronRight className={`w-3.5 h-3.5 transition-transform ${expanded ? 'rotate-90' : ''}`} />
</button>
) : (
<div className="w-4.5 flex-shrink-0" />
<div className="w-4.5" />
)}
<FolderOpen className="w-4 h-4 text-bambu-green flex-shrink-0" />
<span className="text-sm flex-1 break-words" title={folder.name}>{folder.name}</span>
<span className="text-sm truncate flex-1" title={folder.name}>{folder.name}</span>
{/* Link indicator - clickable to change link */}
{isLinked && (
<button
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -23,8 +23,8 @@
<!-- Splash screens for iOS -->
<link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
<script type="module" crossorigin src="/assets/index-CMTqTaab.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DP3rxcEu.css">
<script type="module" crossorigin src="/assets/index-qV1ROCuN.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BQIOMqJ9.css">
</head>
<body>
<div id="root"></div>