Home Explore Help
Sign In
yunoadmin
/
bambuddy
mirror of https://github.com/maziggy/bambuddy
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Allow folder names to wrap in File Manager navigation

Long folder names were truncated with ellipsis. Now they wrap onto
multiple lines and show full name on hover tooltip.

Closes #160
maziggy 4 months ago
parent
2e03fca2df
commit
d0cc282d3e
4 changed files with 6 additions and 6 deletions
Unified View Show Diff Stats
  1. 4 4
      frontend/src/pages/FileManagerPage.tsx
  2. 0 0
      static/assets/index-CMTqTaab.js
  3. 0 0
      static/assets/index-DP3rxcEu.css
  4. 2 2
      static/index.html

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

@@ -704,7 +704,7 @@ function FolderTreeItem({ folder, selectedFolderId, onSelect, onDelete, onLink,
 
   return (
 
   return (
 
     <div>
 
     <div>
 
       <div
 
       <div
 
-        className={`group flex items-center gap-1 px-2 py-1.5 rounded cursor-pointer transition-colors ${
 
+        className={`group flex items-start 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"
 
+            className="p-0.5 hover:bg-bambu-dark-tertiary rounded flex-shrink-0"
 
           >
 
           >
 
             <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" />
 
+          <div className="w-4.5 flex-shrink-0" />
 
         )}
 
         )}
 
         <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 truncate flex-1">{folder.name}</span>
 
+        <span className="text-sm flex-1 break-words" 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-CMTqTaab.js


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


+ 2 - 2
static/index.html
View File 

@@ -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-B2lCUmey.js"></script>
 
-    <link rel="stylesheet" crossorigin href="/assets/index-BQIOMqJ9.css">
 
+    <script type="module" crossorigin src="/assets/index-CMTqTaab.js"></script>
 
+    <link rel="stylesheet" crossorigin href="/assets/index-DP3rxcEu.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