🐛 Bugfix: How to fix chat layout horizontal overflow (3 root causes) a...

Date: 2026-03-06
Time: 14:52:48 UTC
Session: gspace1-182.2
Agent: angular
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

How to fix chat layout horizontal overflow (3 root causes) and ambient bar z-index/safe-area?

Task: Not specified

🎯 Decision Made

Chosen:

4 SCSS fixes: (1) lib-unified-chat flex constraint in ai-panel-tabs, (2) overflow-x:hidden + min-width:0 in chat-shell, (3) max-width/overflow on unified-message tools, (4) ambient bar z-index 50 + safe-area padding. Plus design tokens for mono font, z-index scale, score colors.

Options Considered:

• No alternatives documented

💭 Reasoning

Three root causes of horizontal overflow: missing flex constraint on lib-unified-chat in tab-content (block display doesn't constrain in flex column), no overflow-x:hidden on messages container (long URLs inflate scroll width), and missing overflow constraints on tools block. Ambient bar had absurdly high z-index (999999) and missing left/right safe-area insets.

📁 Files Involved

• libs/libs-ai/ai-panel-core/src/lib/components/ai-panel-tabs/ai-panel-tabs.component.scss
• libs/libs-ai/vitto-chat/src/lib/components/chat-shell/chat-shell.component.scss
• libs/libs-ai/vitto-chat/src/lib/components/message/unified-message/unified-message.component.scss
• libs/libs-ai/vitto-chat/src/lib/components/ambient-bar/ambient-bar.component.ts
• libs/libs-ai/vitto-chat/src/lib/styles/_chat-variables.scss

🔗 Related

• Decision ID: dev_1772808768699_rjel51i
• Session: 182
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation