[ENHANCEMENT] Large Screen Layout

[lmtr0]

Problem (one or two sentences)

Hello everyone, good day!

I use roo code on a large screen, and inside tabs. Currently it doesn't have a max width, therefore, it ends up like this:

Context (who is affected and when)

People that use roo code on large screens

Desired behavior (conceptual, not technical)

Cursor tab's has a max width (I roughfully calculated 896px) and centers the elements:

Constraints / preferences (optional)

No response

Request checklist

• I've searched existing Issues and Discussions for duplicates
• This describes a specific problem with clear context and impact

Roo Code Task Links (optional)

No response

Acceptance criteria (optional)

No response

Proposed approach (optional)

No response

Trade-offs / risks (optional)

No response

[lmtr0]

@roomote can you take a look at this?

[roomote]

I've seen your comment and will look into implementing a max-width constraint for large screen layouts. I'll explore the webview-ui codebase and open a PR to share my progress.

[roomote]

I've analyzed this issue and here's my proposed implementation plan:

Problem

The webview UI currently has no max-width constraint, causing content to stretch across the entire screen on large displays. This makes it harder to read and use.

Proposed Solution

Add a max-width constraint (896px as suggested) with horizontal centering for the main content areas. The implementation would involve:

1. Modify webview-ui/src/App.tsx: Wrap the main content render in a container div that:

   • Sets max-width: 896px (or a configurable value via Tailwind)
   • Uses margin: 0 auto to center horizontally
   • Maintains width: 100% to keep responsiveness on smaller screens

2. Alternatively, modify each view component: Add the max-width/centering directly to the root containers of:

   • ChatView.tsx - Main chat interface
   • HistoryView.tsx - Task history
   • SettingsView.tsx - Settings panel
   • MarketplaceView.tsx - Marketplace
   • WelcomeView.tsx - Welcome screen
   • CloudView.tsx - Cloud panel

3. Add a Tailwind utility class in index.css for consistency:

.max-w-chat {
  max-width: 896px;
  margin-left: auto;
  margin-right: auto;
}

Recommendation

I recommend Option 2 (modifying each view component) as it provides more granular control and avoids potential issues with fixed-position elements. The ChatView already uses fixed positioning for some elements, so a wrapper in App.tsx might cause layout issues.

The change would look something like wrapping the content in:

<div className="w-full max-w-[896px] mx-auto">
  {/* existing content */}
</div>

Benefits

• Improved readability on large screens
• Content stays focused and easier to scan
• Consistent with modern UI patterns (similar to Cursor)
• Fully responsive - no impact on smaller screens

Please mention @roomote in a comment saying that you approve this plan, and I'll proceed with the implementation.

[roomote]

Opened a PR with my attempt at addressing this: #10688

The implementation adds a max-width of 896px with centered content when Roo Code is displayed in editor/tab mode on large screens. The constraint only applies in tab mode, leaving the sidebar layout unchanged.

Feedback welcome!