🏗️ Architecture: How to implement AI panel content push so content resizes al...

Date: 2026-02-11
Time: 16:30:27 UTC
Session: gspace1-105.13
Agent: angular
Confidence: 92%
Status: ✅ Documented

📋 Decision Context

Question:

How to implement AI panel content push so content resizes alongside the panel instead of being hidden behind it?

Task: Implement content push when AI panel opens - best of both worlds (native panel + DOM manipulation)

🎯 Decision Made

Chosen:

Direct Angular style binding margin-right on content-wrapper and top-nav via computed signal contentPushMargin()

Options Considered:

1. CSS variable on layout div + media query margin-right
2. Flex-based layout restructure (panel as flex sibling)
3. Direct Angular style binding margin-right on content-wrapper and top-nav
4. CSS grid with named areas

💭 Reasoning

CSS variable approach via [style.--custom-prop.px] didn't work reliably in Angular for custom properties. Direct [style.margin-right.px] binding is the simplest, most reliable approach. A computed signal combines aiAssistantVisible(), aiPanelWidth(), and isMobile() into one reactive value. The panel stays position:fixed (like VS Code / Chrome DevTools pattern) while content pushes via margin-right. CDK drag-drop works because previews are at document.body level, independent of content positioning. CSS transitions on .content-wrapper and gograb-top-nav provide smooth 0.25s animation. Mobile excluded from push (full-width overlay is correct UX there).

📁 Files Involved

• apps/gograb-space/src/app/components/layout/main-layout/main-layout.component.ts
• apps/gograb-space/src/app/components/layout/main-layout/main-layout.component.html
• apps/gograb-space/src/app/components/layout/main-layout/main-layout.component.scss

🔗 Related

• Decision ID: dev_1770827427770_p4p1bl3
• Session: 105
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation