From ba7aa826c4403c6b124571c8884c09c59f1e29f8 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 13 Jan 2026 13:43:15 +0000
Subject: [PATCH] feat: add max-width constraint for large screen layout

Adds a max-width of 896px and centers content when Roo Code is displayed
in editor/tab mode on large screens. This improves readability and
visual consistency, similar to how Cursor handles large screen layouts.

The constraint only applies in "editor" render context (when opened as a
tab), not in the sidebar where width is naturally constrained.

Closes #10687
---
 webview-ui/src/App.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx
index cccb0422ca8..c2e796c5ce2 100644
--- a/webview-ui/src/App.tsx
+++ b/webview-ui/src/App.tsx
@@ -222,10 +222,16 @@ const App = () => {
 
 	// Do not conditionally load ChatView, it's expensive and there's state we
 	// don't want to lose (user input, disableInput, askResponse promise, etc.)
+
+	// Container for max-width constraint on large screens (editor/tab mode only)
+	const containerClassName = renderContext === "editor" ? "h-full w-full mx-auto max-w-[896px]" : "h-full w-full"
+
 	return showWelcome ? (
-		<WelcomeView />
+		<div className={containerClassName}>
+			<WelcomeView />
+		</div>
 	) : (
-		<>
+		<div className={containerClassName}>
 			{tab === "history" && <HistoryView onDone={() => switchTab("chat")} />}
 			{tab === "settings" && (
 				<SettingsView ref={settingsRef} onDone={() => setTab("chat")} targetSection={currentSection} />
@@ -310,7 +316,7 @@ const App = () => {
 					}}
 				/>
 			)}
-		</>
+		</div>
 	)
 }