From 338622b734b194f5ef81326437621afdd72dbe59 Mon Sep 17 00:00:00 2001
From: nogataka <nogataka@gmail.com>
Date: Sat, 31 Jan 2026 12:57:45 +0900
Subject: [PATCH] fix: chat screen layout broken in new project creation flow

Root cause: NewProjectModal was rendered inside ProjectSelector (in header),
causing the fixed inset-0 container to be constrained by the dropdown DOM tree.

Changes:
- NewProjectModal.tsx: Use createPortal to render chat screen at document.body level
- SpecCreationChat.tsx: Change h-full to h-screen for explicit viewport height
- SpecCreationChat.tsx: Add min-h-0 to messages area for proper flexbox scrolling

This fixes the chat screen not displaying full-screen when creating a new project
with Claude.
---
 ui/src/components/NewProjectModal.tsx  | 10 ++++++----
 ui/src/components/SpecCreationChat.tsx |  9 ++++-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/NewProjectModal.tsx b/ui/src/components/NewProjectModal.tsx
index 38e567f..4b46023 100644
--- a/ui/src/components/NewProjectModal.tsx
+++ b/ui/src/components/NewProjectModal.tsx
@@ -10,6 +10,7 @@
  */
 
 import { useState } from 'react'
+import { createPortal } from 'react-dom'
 import { Bot, FileEdit, ArrowRight, ArrowLeft, Loader2, CheckCircle2, Folder } from 'lucide-react'
 import { useCreateProject } from '../hooks/useProjects'
 import { SpecCreationChat } from './SpecCreationChat'
@@ -200,10 +201,10 @@ export function NewProjectModal({
     }
   }
 
-  // Full-screen chat view
+  // Full-screen chat view - use portal to render at body level
   if (step === 'chat') {
-    return (
-      <div className="fixed inset-0 z-50 bg-background">
+    return createPortal(
+      <div className="fixed inset-0 z-50 bg-background flex flex-col">
         <SpecCreationChat
           projectName={projectName.trim()}
           onComplete={handleSpecComplete}
@@ -213,7 +214,8 @@ export function NewProjectModal({
           initializerError={initializerError}
           onRetryInitializer={handleRetryInitializer}
         />
-      </div>
+      </div>,
+      document.body
     )
   }
 
diff --git a/ui/src/components/SpecCreationChat.tsx b/ui/src/components/SpecCreationChat.tsx
index c96a1f2..184b26e 100644
--- a/ui/src/components/SpecCreationChat.tsx
+++ b/ui/src/components/SpecCreationChat.tsx
@@ -228,7 +228,7 @@ export function SpecCreationChat({
   }
 
   return (
-    <div className="flex flex-col h-full bg-background">
+    <div className="flex flex-col h-screen bg-background">
       {/* Header */}
       <div className="flex items-center justify-between p-4 border-b-2 border-border bg-card">
         <div className="flex items-center gap-3">
@@ -303,7 +303,7 @@ export function SpecCreationChat({
       )}
 
       {/* Messages area */}
-      <div className="flex-1 overflow-y-auto py-4">
+      <div className="flex-1 overflow-y-auto py-4 min-h-0">
         {messages.length === 0 && !isLoading && (
           <div className="flex flex-col items-center justify-center h-full text-center p-8">
             <Card className="p-6 max-w-md">
@@ -451,9 +451,8 @@ export function SpecCreationChat({
 
       {/* Completion footer */}
       {isComplete && (
-        <div className={`p-4 border-t-2 border-border ${
-          initializerStatus === 'error' ? 'bg-destructive' : 'bg-green-500'
-        }`}>
+        <div className={`p-4 border-t-2 border-border ${initializerStatus === 'error' ? 'bg-destructive' : 'bg-green-500'
+          }`}>
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               {initializerStatus === 'starting' ? (