ソースを参照

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 7 ヶ月 前
コミット
d0cc282d3e

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

@@ -704,7 +704,7 @@ function FolderTreeItem({ folder, selectedFolderId, onSelect, onDelete, onLink,
   return (
     <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
             ? '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"
+            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' : ''}`} />
           </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" />
-        <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 */}
         {isLinked && (
           <button

ファイルの差分が大きいため隠しています
+ 0 - 0
static/assets/index-CMTqTaab.js


ファイルの差分が大きいため隠しています
+ 0 - 0
static/assets/index-DP3rxcEu.css


+ 2 - 2
static/index.html

@@ -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-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>
   <body>
     <div id="root"></div>

この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません