fix: Breadcrumb item in explorer nav overflows

nocpiun · Aug 11, 2024 · 9a4b113 · 9a4b113
1 parent a0655f3
commit 9a4b113
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -34,7 +34,7 @@ File Explorer -> FE -> Fe (Chemical Element) -> Ferrum
 
 First, you need to make sure that your server (or computer) has installed Nodejs.
 
-1. Download and install
+1. **Download and install**
 
 ```bash
 git clone https://github.com/nocpiun/ferrum.git
@@ -44,21 +44,21 @@ npm run patch
 npm run build
 ```
 
-2. Prepare the `.pwd` file
+2. **Prepare the `.pwd` file**
 
 Rename the `.pwd.example` to `.pwd` in the project root folder. This file stores your access key to Ferrum. The default password is `123456`, and you can change your password in the settings.
 
 ```txt
 PASSWORD=....
 ```
 
-3. Run the app (Recommended to use Administrator privilege)
+3. **Run the app** (Recommended to use Administrator privilege)
 
 ```bash
 npm run start
 ```
 
-4. Enter `http://localhost:3300`.
+4. **Enter `http://localhost:3300`**
 
 ### To get update
 

diff --git a/components/explorer/explorer-nav.tsx b/components/explorer/explorer-nav.tsx
@@ -175,6 +175,7 @@ const ExplorerNav: React.FC = () => {
                     {
                         explorer.path.map((folderName, index, { length }) => (
                             <BreadcrumbItem
+                                className="max-w-40"
                                 classNames={{ item: "gap-1" }}
                                 isCurrent={index !== 0 && index === length - 1 && !explorer.currentViewing}
                                 isDisabled={index === 0 && length === 1 && !explorer.currentViewing}
@@ -185,22 +186,27 @@ const ExplorerNav: React.FC = () => {
                                     ? <FolderRoot size={18}/>
                                     : getFolderIcon(folderName, 18)
                                 }
-                                {
-                                    index === 0
-                                    ? explorer.disk
-                                    : decodeURIComponent(folderName)
-                                }
+                                <span className="overflow-hidden whitespace-nowrap text-ellipsis">
+                                    {
+                                        index === 0
+                                        ? explorer.disk
+                                        : decodeURIComponent(folderName)
+                                    }
+                                </span>
                             </BreadcrumbItem>
                         ))
                     }
                     {
                         explorer.currentViewing
                         ? (
                             <BreadcrumbItem
+                                className="max-w-40"
                                 classNames={{ item: "gap-1" }}
                                 isCurrent>
                                 {getFileIcon(getExtname(explorer.currentViewing))}
-                                {explorer.currentViewing}
+                                <span className="overflow-hidden whitespace-nowrap text-ellipsis">
+                                    {explorer.currentViewing}
+                                </span>
                             </BreadcrumbItem>
                         )
                         : null