🏗️ Architecture: How to fix tab titles disappearing when tab width is too nar...

Date: 2026-03-08
Time: 17:33:25 UTC
Session: gspace1-192.2
Agent: angular
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

How to fix tab titles disappearing when tab width is too narrow in dock-layout?

Task: Fix tab title visibility in dock-layout

🎯 Decision Made

Chosen:

Added min-width: 48px + flex: 0 0 auto on .dock-tab CSS, plus [attr.title] for native browser tooltip on hover

Options Considered:

1. Custom Angular CDK tooltip component
2. Native title attribute + CSS min-width
3. CSS text-overflow with custom tooltip directive

💭 Reasoning

Root cause: .dock-tab had min-width: 0 allowing flex to shrink tabs to zero width. Combined with no flex-shrink protection, the scroll container could compress tabs below readable size. The fix is two-part: (1) min-width: 48px ensures icon + a few chars always visible, (2) flex: 0 0 auto makes tabs rigid — they never shrink, and the scroll container handles overflow via horizontal scrolling. Native title attribute was chosen over custom tooltip for zero-dependency, consistent browser UX.

📁 Files Involved

• libs/libs-ui/dock-layout/src/lib/components/dock-tab/dock-tab.component.ts

🔗 Related

• Decision ID: dev_1772991205314_19y2rmn
• Session: 192
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation