From a5e4efcf8633c92679d9e2ce23fda49a654674d5 Mon Sep 17 00:00:00 2001
From: Luca Rossi <luca.rossi.917@gmail.com>
Date: Mon, 2 Mar 2026 01:50:52 +0100
Subject: [PATCH] fix: increase tab max-width and add ellipsis truncation
 (#166)

- Tab max-width increased from 180px to 360px
- Breadcrumb title now truncates with ellipsis at 40vw max-width

Co-authored-by: Test <test@test.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 src/components/BreadcrumbBar.tsx | 12 ++++++------
 src/components/TabBar.tsx        |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/BreadcrumbBar.tsx b/src/components/BreadcrumbBar.tsx
index 1e43dace..80b63135 100644
--- a/src/components/BreadcrumbBar.tsx
+++ b/src/components/BreadcrumbBar.tsx
@@ -156,12 +156,12 @@ export const BreadcrumbBar = memo(function BreadcrumbBar({
       }}
     >
       {/* Left: breadcrumb */}
-      <div className="flex items-center gap-1" style={{ fontSize: 12 }}>
-        <span className="text-muted-foreground">{entry.isA || 'Note'}</span>
-        <span className="text-muted-foreground" style={{ margin: '0 2px' }}>&rsaquo;</span>
-        <span className="font-medium text-foreground">{entry.title}</span>
-        <span className="text-muted-foreground" style={{ margin: '0 4px' }}>&middot;</span>
-        <span className="text-muted-foreground">{wordCount.toLocaleString()} words</span>
+      <div className="flex items-center gap-1 min-w-0 whitespace-nowrap" style={{ fontSize: 12 }}>
+        <span className="shrink-0 text-muted-foreground">{entry.isA || 'Note'}</span>
+        <span className="shrink-0 text-muted-foreground" style={{ margin: '0 2px' }}>&rsaquo;</span>
+        <span className="truncate font-medium text-foreground" style={{ maxWidth: '40vw' }}>{entry.title}</span>
+        <span className="shrink-0 text-muted-foreground" style={{ margin: '0 4px' }}>&middot;</span>
+        <span className="shrink-0 text-muted-foreground">{wordCount.toLocaleString()} words</span>
         {noteStatus === 'pendingSave' && (
           <>
             <span className="text-muted-foreground" style={{ margin: '0 4px' }}>&middot;</span>
diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx
index b85aaddf..ecfc7e3a 100644
--- a/src/components/TabBar.tsx
+++ b/src/components/TabBar.tsx
@@ -219,7 +219,7 @@ function TabItem({ tab, isActive, isEditing, noteStatus, isDragging, showDropBef
       draggable={!isEditing}
       {...dragProps}
       className={cn(
-        "group flex shrink-0 items-center gap-1.5 whitespace-nowrap max-w-[180px] transition-all relative",
+        "group flex shrink-0 items-center gap-1.5 whitespace-nowrap max-w-[360px] transition-all relative",
         isActive ? "text-foreground" : "text-muted-foreground hover:text-secondary-foreground"
       )}
       style={{