From 10a312ae8969c61dc1ecb8119abe4fdd1a295624 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Mon, 30 Mar 2026 21:50:29 -0400
Subject: [PATCH] feat: wrap tree item text in span elements and improve text
 overflow handling with flexbox

- Wrap vault, directory, and file names in span.tree-item-text elements
- Add flex: 1 to tree-item-text to enable proper text truncation
- Set min-width: 0 on tree-item and tree-item-text to allow flex shrinking
- Move overflow and text-overflow styles from tree-item to tree-item-text
- Update icon colors: use text-secondary for default, accent for active/vault items
---
 frontend/app.js    |  8 ++++----
 frontend/style.css | 11 +++++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/app.js b/frontend/app.js
index f7e76ef..a43f395 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -1955,7 +1955,7 @@
     const vaultsToShow = selectedContextVault === "all" ? allVaults : allVaults.filter((v) => v.name === selectedContextVault);
 
     vaultsToShow.forEach((v) => {
-      const vaultItem = el("div", { class: "tree-item vault-item", "data-vault": v.name }, [icon("chevron-right", 14), getVaultIcon(v.name, 16), document.createTextNode(` ${v.name} `), smallBadge(v.file_count)]);
+      const vaultItem = el("div", { class: "tree-item vault-item", "data-vault": v.name }, [icon("chevron-right", 14), getVaultIcon(v.name, 16), el("span", { class: "tree-item-text" }, [document.createTextNode(v.name)]), smallBadge(v.file_count)]);
       vaultItem.addEventListener("click", () => toggleVault(vaultItem, v.name));
       
       vaultItem.addEventListener("contextmenu", (e) => {
@@ -2052,7 +2052,7 @@
 
     vaults.forEach((v) => {
       // Sidebar tree entry
-      const vaultItem = el("div", { class: "tree-item vault-item", "data-vault": v.name }, [icon("chevron-right", 14), getVaultIcon(v.name, 16), document.createTextNode(` ${v.name} `), smallBadge(v.file_count)]);
+      const vaultItem = el("div", { class: "tree-item vault-item", "data-vault": v.name }, [icon("chevron-right", 14), getVaultIcon(v.name, 16), el("span", { class: "tree-item-text" }, [document.createTextNode(v.name)]), smallBadge(v.file_count)]);
       vaultItem.addEventListener("click", () => toggleVault(vaultItem, v.name));
       
       vaultItem.addEventListener("contextmenu", (e) => {
@@ -2267,7 +2267,7 @@
       }
 
       if (item.type === "directory") {
-        const dirItem = el("div", { class: "tree-item", "data-vault": vaultName, "data-path": item.path }, [icon("chevron-right", 14), icon("folder", 16), document.createTextNode(` ${item.name} `), smallBadge(item.children_count)]);
+        const dirItem = el("div", { class: "tree-item", "data-vault": vaultName, "data-path": item.path }, [icon("chevron-right", 14), icon("folder", 16), el("span", { class: "tree-item-text" }, [document.createTextNode(item.name)]), smallBadge(item.children_count)]);
         attachTreeItemActionButton(dirItem, vaultName, item.path, "directory", false);
         attachTreeItemLongPress(dirItem, () => ({ vault: vaultName, path: item.path, type: "directory", isReadonly: false }));
         fragment.appendChild(dirItem);
@@ -2301,7 +2301,7 @@
       } else {
         const fileIconName = getFileIcon(item.name);
         const displayName = item.name.match(/\.md$/i) ? item.name.replace(/\.md$/i, "") : item.name;
-        const fileItem = el("div", { class: "tree-item", "data-vault": vaultName, "data-path": item.path }, [icon(fileIconName, 16), document.createTextNode(` ${displayName}`)]);
+        const fileItem = el("div", { class: "tree-item", "data-vault": vaultName, "data-path": item.path }, [icon(fileIconName, 16), el("span", { class: "tree-item-text" }, [document.createTextNode(displayName)])]);
         attachTreeItemActionButton(fileItem, vaultName, item.path, "file", false);
         attachTreeItemLongPress(fileItem, () => ({ vault: vaultName, path: item.path, type: "file", isReadonly: false }));
         fileItem.addEventListener("click", () => {
diff --git a/frontend/style.css b/frontend/style.css
index 1cc1f2c..0aa274e 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -830,8 +830,15 @@ select {
     background 120ms ease,
     color 120ms ease;
   white-space: nowrap;
+  min-width: 0; /* Allow flex item to shrink */
+}
+
+.tree-item > .tree-item-text {
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
 }
 .tree-item:hover {
   background: var(--bg-hover);
@@ -874,13 +881,13 @@ select {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  color: var(--text-muted);
+  color: var(--text-secondary);
 }
 .tree-item.active .icon {
   color: var(--accent);
 }
 .tree-item.vault-item .icon {
-  color: var(--accent-green);
+  color: var(--accent);
 }
 
 .tree-item-action-btn {