From 9c2e0aac881395792f8fbc6a9375967494e9ef77 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Wed, 20 May 2026 08:42:30 +0200
Subject: [PATCH] fix(site/src/pages/AgentsPage): widen inline desktop preview
 to fill chat (#25497)

---
 .../tools/InlineDesktopPreview.tsx             | 18 +++++++++---------
 .../ChatElements/tools/SubagentTool.tsx        |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx
index 5a6de7ff03..05e2b1500a 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/InlineDesktopPreview.tsx
@@ -6,7 +6,7 @@ import {
 	type UseDesktopConnectionResult,
 	useDesktopConnection,
 } from "#/pages/AgentsPage/hooks/useDesktopConnection";
-import { DEFAULT_ASPECT, PREVIEW_HEIGHT } from "./previewConstants";
+import { DEFAULT_ASPECT } from "./previewConstants";
 
 /**
  * Non-interactive inline VNC desktop preview. The noVNC canvas is
@@ -98,8 +98,8 @@ export const InlineDesktopPreview: React.FC<{
 	if (status === "idle" || status === "connecting") {
 		return wrapWithOverlay(
 			<div
-				className="flex items-center justify-center text-content-secondary"
-				style={{ aspectRatio: DEFAULT_ASPECT, height: PREVIEW_HEIGHT }}
+				className="flex w-full items-center justify-center text-content-secondary"
+				style={{ aspectRatio: DEFAULT_ASPECT }}
 			>
 				<Spinner loading className="h-5 w-5" />
 			</div>,
@@ -109,8 +109,8 @@ export const InlineDesktopPreview: React.FC<{
 	if (status === "disconnected") {
 		return wrapWithOverlay(
 			<div
-				className="flex items-center justify-center text-xs text-content-secondary"
-				style={{ aspectRatio, height: PREVIEW_HEIGHT }}
+				className="flex w-full items-center justify-center text-xs text-content-secondary"
+				style={{ aspectRatio }}
 			>
 				Desktop disconnected. Reconnecting…
 			</div>,
@@ -120,8 +120,8 @@ export const InlineDesktopPreview: React.FC<{
 	if (status === "error") {
 		return wrapWithOverlay(
 			<div
-				className="flex items-center justify-center text-xs text-content-secondary"
-				style={{ aspectRatio: DEFAULT_ASPECT, height: PREVIEW_HEIGHT }}
+				className="flex w-full items-center justify-center text-xs text-content-secondary"
+				style={{ aspectRatio: DEFAULT_ASPECT }}
 			>
 				Could not connect to desktop.
 			</div>,
@@ -136,8 +136,8 @@ export const InlineDesktopPreview: React.FC<{
 				containerRef.current = el;
 				if (el) attach(el);
 			}}
-			className="pointer-events-none"
-			style={{ aspectRatio, height: PREVIEW_HEIGHT }}
+			className="pointer-events-none w-full"
+			style={{ aspectRatio }}
 		/>,
 	);
 };
diff --git a/site/src/pages/AgentsPage/components/ChatElements/tools/SubagentTool.tsx b/site/src/pages/AgentsPage/components/ChatElements/tools/SubagentTool.tsx
index a39f926f74..c7995b50fb 100644
--- a/site/src/pages/AgentsPage/components/ChatElements/tools/SubagentTool.tsx
+++ b/site/src/pages/AgentsPage/components/ChatElements/tools/SubagentTool.tsx
@@ -244,7 +244,7 @@ export const SubagentTool: React.FC<{
 			</button>
 
 			{showDesktopPreview && desktopChatId && toolStatus !== "completed" && (
-				<div className="mt-1.5 w-fit overflow-hidden rounded-lg border border-solid border-border-default">
+				<div className="mt-1.5 overflow-hidden rounded-lg border border-solid border-border-default">
 					<InlineDesktopPreview
 						chatId={desktopChatId}
 						onClick={onOpenDesktop}