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/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' ? (