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: Changed h-full → h-screen for explicit viewport heightSpecCreationChat.tsx: Added min-h-0 to messages area for proper flexbox scrolling
Labels
bug, ui, css, react-portal
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
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-0container to be placed inside the dropdown DOM tree instead of at the document body level.DOM Structure (before fix):
Related Components
ProjectSelector.tsxNewProjectModalas a childNewProjectModal.tsxfixed inset-0was constrained by parent DOMSolution
Use React Portal (
createPortal) to render the chat screen directly atdocument.bodylevel, bypassing the DOM hierarchy.Fix in NewProjectModal.tsx:
DOM Structure (after fix):
Additional Fixes Applied
SpecCreationChat.tsx: Changedh-full→h-screenfor explicit viewport heightSpecCreationChat.tsx: Addedmin-h-0to messages area for proper flexbox scrollingLabels
bug,ui,css,react-portal