feat: add max-width constraint for large screen layout

[roomote]

Related GitHub Issue

Closes: #10687

Description

This PR attempts to address Issue #10687 by adding a max-width constraint for large screen layouts in editor/tab mode.

Implementation Details:

• Added a wrapper div in App.tsx that applies max-width: 896px with centered content (mx-auto)
• The constraint only applies when renderContext === "editor" (tab mode), leaving the sidebar layout unchanged
• The 896px max-width value was calculated based on Cursor's implementation as noted in the issue

Key design choices:

• Applied the constraint at the App component level to affect all views (ChatView, SettingsView, HistoryView, etc.)
• Used Tailwind classes (max-w-[896px] mx-auto) for consistency with the existing codebase
• Preserved full-width behavior in sidebar mode where the constraint isn't needed

Test Procedure

1. Open Roo Code in a tab (editor mode) on a large screen (>896px width)
2. Verify the content is constrained to 896px max-width and centered
3. Open Roo Code in the sidebar
4. Verify the content still uses full width (no constraint applied)
5. Test across different views (Chat, Settings, History, Marketplace, Cloud)

Automated Testing:

• Type checking passes (tsc --noEmit)
• Linting passes (eslint)
• All existing App.spec.tsx tests pass (7/7)

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes (if applicable).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

No screenshots available in this automated environment, but the visual change should show:

• Before: Content stretches across the full width of the editor tab
• After: Content is constrained to 896px and centered, similar to Cursor's layout

Documentation Updates

• No documentation updates are required.

Additional Notes

This is an automated PR attempt. Feedback and guidance are welcome!

---

Important

Adds a max-width constraint of 896px for large screen layouts in editor/tab mode in App.tsx, using Tailwind CSS for consistency.

• Behavior:
  • Adds a wrapper div in App.tsx with max-width: 896px and centered content (mx-auto) for large screens in editor/tab mode.
  • Applies constraint only when renderContext === "editor", leaving sidebar layout unchanged.
• Design:
  • Uses Tailwind classes (max-w-[896px] mx-auto) for consistency.
  • Affects all views (ChatView, SettingsView, HistoryView, etc.) at the App component level.
• Testing:
  • Manual testing procedure outlined for different views and contexts.
  • Automated tests pass: type checking (tsc --noEmit), linting (eslint), and App.spec.tsx tests (7/7).

^{This description was created by for ba7aa82. You can customize this summary. It will automatically update as commits are pushed.}

[roomote]

Rooviewer   See task on Roo Cloud

Reviewed the PR changes. The implementation is clean and correct:

• Type-safe check for renderContext === "editor"
• Preserves full-width behavior in sidebar mode
• Uses proper Tailwind classes consistent with the codebase
• Non-breaking change from Fragment to div wrapper

No issues found.

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}