[Bug]Chat Screen Layout Broken in New Project Creation Flow #142
Description
Issue: Chat Screen Layout Broken in New Project Creation Flow
Summary
The chat screen (SpecCreationChat) displays incorrectly on step 6 of the new project creation flow (after selecting "Create with Claude").
Steps to Reproduce
- Open project dropdown
- Click "New Project"
- Enter project name → Click "Next"
- Select project folder → Click "Select This Folder"
- Select "Create with Claude"
- Bug occurs: Chat screen layout is broken
Root Cause Analysis
The Real Problem
The chat screen was rendered inside the ProjectSelector component, which is inside the header. This caused the fixed inset-0 container to be placed inside the dropdown DOM tree instead of at the document body level.
DOM Structure (before fix):
<body>
<div id="root">
<div class="min-h-screen">
<header>
<div class="relative"> <!-- ProjectSelector -->
<button>Select Project</button>
<div class="fixed inset-0"> <!-- Chat here! Wrong! -->
<SpecCreationChat />
</div>
</div>
</header>
<main>Welcome to AutoCoder</main> <!-- Still visible behind -->
</div>
</div>
</body>
Related Components
| File | Issue |
|---|---|
ProjectSelector.tsx |
Renders NewProjectModal as a child |
NewProjectModal.tsx |
Chat view using fixed inset-0 was constrained by parent DOM |
Solution
Use React Portal (createPortal) to render the chat screen directly at document.body level, bypassing the DOM hierarchy.
Fix in NewProjectModal.tsx:
import { createPortal } from 'react-dom'
// Full-screen chat view - use portal to render at body level
if (step === 'chat') {
return createPortal(
<div className="fixed inset-0 z-50 bg-background flex flex-col">
<SpecCreationChat ... />
</div>,
document.body
)
}DOM Structure (after fix):
<body>
<div id="root">
<div class="min-h-screen">
<header>...</header>
<main>...</main>
</div>
</div>
<div class="fixed inset-0"> <!-- Chat here! Correct! -->
<SpecCreationChat />
</div>
</body>
Additional Fixes Applied
SpecCreationChat.tsx: Changedh-full→h-screenfor explicit viewport heightSpecCreationChat.tsx: Addedmin-h-0to messages area for proper flexbox scrolling
Labels
bug, ui, css, react-portal