davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: increase tab max-width and add ellipsis truncation (#166)

Browse Source 
- 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>
This commit is contained in:
Luca Rossi
2026-03-02 01:50:52 +01:00
committed by GitHub
parent e4bab72952
commit a5e4efcf86
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/BreadcrumbBar.tsx
View File

@@ -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>

2
src/components/TabBar.tsx
View File

@@ -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={{