Fix: Chat Screen Layout Broken in New Project Creation Flow by nogataka · Pull Request #143 · AutoForgeAI/autoforge

nogataka · 2026-01-31T04:15:50Z

Fixes #142

Summary

This PR fixes the chat screen layout issue that occurred when creating a new project with Claude. The SpecCreationChat component was not displaying correctly as a full-screen overlay.

Problem

When selecting "Create with Claude" in the new project creation flow (step 6), the chat interface exhibited the following issues:

The chat interface was squeezed and not displaying full-screen
The main content ("Welcome to AutoCoder" page) remained visible behind the chat
The messages area was not properly scrollable

Screenshots (Before Fix)

The DOM structure showed the chat was incorrectly nested inside the header's ProjectSelector dropdown.

Root Cause

The NewProjectModal component was rendered as a child of ProjectSelector, which is positioned inside the <header> element:

<body>
  <div id="root">
    <div class="min-h-screen">
      <header>
        <div class="relative">  <!-- ProjectSelector -->
          <button>Select Project</button>
          <div class="fixed inset-0 z-50">  <!-- Chat stuck inside dropdown! -->
            <SpecCreationChat />
          </div>
        </div>
      </header>
      <main>Welcome to AutoCoder</main>  <!-- Still visible behind -->
    </div>
  </div>
</body>

Even though fixed inset-0 should position the element relative to the viewport, the DOM hierarchy caused the layout to break because the fixed container was constrained by its parent elements in the dropdown.

Solution

1. Use React Portal for Chat View

Used createPortal from react-dom to render the chat screen directly at document.body level, bypassing the DOM hierarchy entirely.

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
  )
}

2. Fix Height Inheritance in SpecCreationChat

Changed h-full to h-screen for explicit viewport height (100vh)
Added min-h-0 to the messages area to fix flexbox overflow/scrolling issues

DOM Structure After Fix

<body>
  <div id="root">
    <div class="min-h-screen">
      <header>...</header>
      <main>...</main>
    </div>
  </div>
  <!-- Chat now correctly at body level via Portal -->
  <div class="fixed inset-0 z-50 bg-background flex flex-col">
    <SpecCreationChat />
  </div>
</body>

Files Changed

File	Changes
`ui/src/components/NewProjectModal.tsx`	Added `createPortal` import, wrapped chat view in portal to render at body level
`ui/src/components/SpecCreationChat.tsx`	Changed `h-full` → `h-screen`, added `min-h-0` to messages area

Testing

Manual Testing Steps

Start the application (./start_ui.sh)
Click the project dropdown in the header
Click "New Project"
Enter a project name → Click "Next"
Select a folder → Click "Select This Folder"
Choose "Create with Claude"
✅ Verify: Chat screen now displays full-screen correctly
✅ Verify: The main content is completely hidden behind the chat overlay
✅ Verify: Messages area is scrollable when content overflows

Expected Result

The chat screen should cover the entire viewport as a proper full-screen overlay, with no background content visible.

Related Issues

Fixes [Bug]Chat Screen Layout Broken in New Project Creation Flow #142

Type of Change

Bug fix (non-breaking change which fixes an issue)

Summary by CodeRabbit

Style
- Improved spec creation chat layout to optimize viewport utilization and prevent message area overflow issues.
- Updated chat step rendering for better positioning and display consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

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.

coderabbitai · 2026-01-31T04:16:04Z

📝 Walkthrough

Walkthrough

Fixed chat screen layout issues in the new project creation flow by using React portals to render the chat at document body level instead of within the header component, combined with CSS height adjustments for proper viewport coverage.

Changes

Cohort / File(s)	Summary
Chat Portal Rendering `ui/src/components/NewProjectModal.tsx`	Imported `createPortal` from react-dom and wrapped the chat step view with portal rendering to `document.body`, moving the fixed-position chat container out of the nested DOM hierarchy to the document root.
Layout and Height Fixes `ui/src/components/SpecCreationChat.tsx`	Changed main container height from `h-full` to `h-screen` for explicit viewport coverage; added `min-h-0` to messages area to prevent flexbox overflow; reformatted Completion footer class string without functional changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A chat was stuck in header's fold,
So trapped by DOM, or so we're told,
With portal magic, breaking free,
Now body-bound, for all to see!
The layout blooms at viewport height—
Our fluffy fix has set things right! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main fix: resolving the broken chat screen layout in the New Project creation flow by using React Portal.
Linked Issues check	✅ Passed	All objectives from issue `#142` are met: chat displays full-screen via createPortal, DOM hierarchy constraint removed, scrolling fixed with h-screen and min-h-0.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the chat layout issue; no unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

leonvanzyl · 2026-02-01T08:12:51Z

Thank you

…AutoForgeAI#143) - Added ix_event_run_event_type composite index to AgentEvent.__table_args__ - Added migration function _migrate_add_agent_event_run_event_type_index() for existing databases (idempotent, skips if index or table doesn't exist) - Wired migration into create_database() after Feature AutoForgeAI#142 migration - Existing index on (run_id, sequence) is preserved - 8 tests verify model definition, database schema, migration, and integration Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…ut-bug Fix: Chat Screen Layout Broken in New Project Creation Flow

nogataka mentioned this pull request Jan 31, 2026

[Bug]Chat Screen Layout Broken in New Project Creation Flow #142

Closed

leonvanzyl merged commit e01e311 into AutoForgeAI:master Feb 1, 2026
3 checks passed

rudiheydra added a commit to rudiheydra/AutoBuildr that referenced this pull request Feb 2, 2026

docs: Update progress notes for Feature AutoForgeAI#143 completion

5428abd

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

CoreAspectStu pushed a commit to CoreAspectStu/autocoder-custom that referenced this pull request Feb 9, 2026

Merge pull request AutoForgeAI#143 from nogataka/fix/chat-screen-layo…

cf726a8

…ut-bug Fix: Chat Screen Layout Broken in New Project Creation Flow

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

Fix: Chat Screen Layout Broken in New Project Creation Flow#143

Fix: Chat Screen Layout Broken in New Project Creation Flow#143
leonvanzyl merged 1 commit intoAutoForgeAI:masterfrom
nogataka:fix/chat-screen-layout-bug

nogataka commented Jan 31, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jan 31, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Uh oh!

leonvanzyl commented Feb 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

Conversation

nogataka commented Jan 31, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Problem

Screenshots (Before Fix)

Root Cause

Solution

1. Use React Portal for Chat View

2. Fix Height Inheritance in SpecCreationChat

DOM Structure After Fix

Files Changed

Testing

Manual Testing Steps

Expected Result

Related Issues

Type of Change

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Uh oh!

leonvanzyl commented Feb 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nogataka commented Jan 31, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 31, 2026 •

edited

Loading