fix(chrome extension): Simplify NRFPage ChatInputBar layout to use normal flex flow

[rohoswagger]

Description

Refactored the ChatInputBar container layout in NRFPage to use normal flexbox flow instead of absolute positioning. This change:

• Removes the conditional absolute positioning logic that was applied when hasMessages was true
• Simplifies the DOM structure by eliminating one level of nested divs
• Aligns the layout behavior with AppPage's approach for consistency
• Maintains the same visual spacing with the existing Spacer component and flex-1 spacer for welcome message state

The ChatInputBar now flows naturally within the flex container, making the layout more predictable and easier to maintain.

How Has This Been Tested?

• Verified ChatInputBar displays correctly with and without messages
• Confirmed spacing and alignment match previous behavior
• Tested that the welcome message state still properly positions content with the flex-1 spacer

Screen.Recording.2026-02-09.at.09.17.59.mov

Additional Options

• [Required] I have considered whether this PR needs to be cherry-picked to the latest beta branch.
• [Optional] Override Linear Check

https://claude.ai/code/session_01C81TQdHFsmjYkNRiU8ck7R

---

Summary by cubic

Moved the NRFPage ChatInputBar into normal flex flow so it sits below messages and doesn’t overlay the history. Matches AppPage behavior and simplifies the layout.

• Bug Fixes

  • Removed absolute positioning that caused the input bar to overlay the ChatScrollContainer.

• Refactors

  • Dropped a nested container and used a single flex wrapper with max-width and padding; kept Spacer and the welcome-state flex-1 to preserve spacing.

^{Written for commit 3162a94. Summary will update on new commits.}

[greptile-apps]

Greptile Overview

Greptile Summary

This PR refactors the Chrome extension NRFPage chat layout so ChatInputBar participates in normal flexbox flow rather than being absolutely positioned over the message history. The change simplifies the DOM structure (removing a wrapper/conditional positioning logic) and aligns NRFPage’s layout strategy with AppPage, so the input bar sits under ChatScrollContainer instead of overlaying it when messages exist.

Confidence Score: 5/5

• This PR looks safe to merge and is unlikely to introduce functional regressions.
• The change is a straightforward layout refactor in a single React component, removing absolute positioning in favor of standard flexbox flow. There are no apparent state/logic changes, no new side effects, and the diff surface area is small.
• No files require special attention

Important Files Changed

Filename	Overview
web/src/app/app/nrf/NRFPage.tsx	Simplifies NRFPage chat layout by moving ChatInputBar into normal flex flow and removing conditional absolute positioning; no correctness issues found in the diff for typical render states, but verify the new container still preserves scroll/height constraints across all message and welcome states.

Sequence Diagram

sequenceDiagram
    participant U as User
    participant NRF as NRFPage
    participant CSC as ChatScrollContainer
    participant CIB as ChatInputBar

    U->>NRF: Navigate to NRF page
    NRF->>CSC: Render message history
    NRF->>CIB: Render input bar
    Note over NRF,CIB: PR change: CIB is in normal flex flow
    CSC-->>NRF: Height constrained by flex container
    CIB-->>NRF: Sits below history (no overlay)
    U->>CIB: Type / submit message
    CIB-->>NRF: onSubmit callbacks
    NRF-->>CSC: Append message / scroll

Loading

[cubic-dev-ai]

No issues found across 1 file