Browse Source

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
maziggy 4 months ago
parent
commit
60d9505c0d

+ 4 - 4
frontend/src/pages/FileManagerPage.tsx

@@ -704,7 +704,7 @@ function FolderTreeItem({ folder, selectedFolderId, onSelect, onDelete, onLink,
   return (
   return (
     <div>
     <div>
       <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
           selectedFolderId === folder.id
             ? 'bg-bambu-green/20 text-bambu-green'
             ? 'bg-bambu-green/20 text-bambu-green'
             : 'hover:bg-bambu-dark text-white'
             : 'hover:bg-bambu-dark text-white'
@@ -718,15 +718,15 @@ function FolderTreeItem({ folder, selectedFolderId, onSelect, onDelete, onLink,
               e.stopPropagation();
               e.stopPropagation();
               setExpanded(!expanded);
               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' : ''}`} />
             <ChevronRight className={`w-3.5 h-3.5 transition-transform ${expanded ? 'rotate-90' : ''}`} />
           </button>
           </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" />
         <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 */}
         {/* Link indicator - clickable to change link */}
         {isLinked && (
         {isLinked && (
           <button
           <button

File diff suppressed because it is too large
+ 0 - 0
static/assets/index-BQIOMqJ9.css


File diff suppressed because it is too large
+ 0 - 0
static/assets/index-qV1ROCuN.js


+ 2 - 2
static/index.html

@@ -23,8 +23,8 @@
 
 
     <!-- Splash screens for iOS -->
     <!-- Splash screens for iOS -->
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
     <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>
   </head>
   <body>
   <body>
     <div id="root"></div>
     <div id="root"></div>

Some files were not shown because too many files changed in this diff