feat: make task panels resizable (#18590)

BrunoQuaresma · web-flow · commit 8eebb4fa4c39 · 2025-06-27T13:34:04.000-03:00
**Demo:** https://github.com/user-attachments/assets/cc80b768-197e-42a0-9326-f30c9d9038e3
diff --git a/site/package.json b/site/package.json
@@ -102,6 +102,7 @@
 		"react-helmet-async": "2.0.5",
 		"react-markdown": "9.0.3",
 		"react-query": "npm:@tanstack/react-query@5.77.0",
+		"react-resizable-panels": "3.0.3",
 		"react-router-dom": "6.26.2",
 		"react-syntax-highlighter": "15.6.1",
 		"react-textarea-autosize": "8.5.9",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/pages/TaskPage/TaskApps.tsx b/site/src/pages/TaskPage/TaskApps.tsx
@@ -57,7 +57,7 @@ export const TaskApps: FC<TaskAppsProps> = ({ task }) => {
 	}
 
 	return (
-		<main className="flex-1 flex flex-col">
+		<main className="flex flex-col">
 			<div className="w-full flex items-center border-0 border-b border-border border-solid">
 				<div className="p-2 pb-0 flex gap-2 items-center">
 					{embeddedApps.map((app) => (
diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx
@@ -11,6 +11,7 @@ import { AI_PROMPT_PARAMETER_NAME, type Task } from "modules/tasks/tasks";
 import type { ReactNode } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { useParams } from "react-router-dom";
 import { Link as RouterLink } from "react-router-dom";
 import { ellipsizeText } from "utils/ellipsizeText";
@@ -178,11 +179,15 @@ const TaskPage = () => {
 			<Helmet>
 				<title>{pageTitle(ellipsizeText(task.prompt, 64) ?? "Task")}</title>
 			</Helmet>
-
-			<div className="h-full flex justify-stretch">
-				<TaskSidebar task={task} />
-				{content}
-			</div>
+			<PanelGroup autoSaveId="task" direction="horizontal">
+				<Panel defaultSize={25} minSize={20}>
+					<TaskSidebar task={task} />
+				</Panel>
+				<PanelResizeHandle>
+					<div className="w-1 bg-border h-full hover:bg-border-hover transition-all relative" />
+				</PanelResizeHandle>
+				<Panel className="[&>*]:h-full">{content}</Panel>
+			</PanelGroup>
 		</>
 	);
 };
diff --git a/site/src/pages/TaskPage/TaskSidebar.tsx b/site/src/pages/TaskPage/TaskSidebar.tsx
@@ -17,7 +17,6 @@ import { ArrowLeftIcon, EllipsisVerticalIcon } from "lucide-react";
 import type { Task } from "modules/tasks/tasks";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router-dom";
-import { cn } from "utils/cn";
 import { TaskAppIFrame } from "./TaskAppIframe";
 import { TaskStatusLink } from "./TaskStatusLink";
 
@@ -82,15 +81,7 @@ export const TaskSidebar: FC<TaskSidebarProps> = ({ task }) => {
 	const [sidebarApp, sidebarAppStatus] = getSidebarApp(task);
 
 	return (
-		<aside
-			className={cn([
-				[
-					"flex flex-col h-full shrink-0",
-					"border-0 border-r border-solid border-border",
-				],
-				"w-[520px]",
-			])}
-		>
+		<aside className="flex flex-col h-full shrink-0 w-full">
 			<header className="border-0 border-b border-solid border-border p-4 pt-0">
 				<div className="flex items-center justify-between py-1">
 					<TooltipProvider>

Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,7 @@ export const TaskApps: FC<TaskAppsProps> = ({ task }) => {`
`57`	`57`	`}`
`58`	`58`
`59`	`59`	`return (`
`60`		`- <main className="flex-1 flex flex-col">`
	`60`	`+ <main className="flex flex-col">`
`61`	`61`	`<div className="w-full flex items-center border-0 border-b border-border border-solid">`
`62`	`62`	`<div className="p-2 pb-0 flex gap-2 items-center">`
`63`	`63`	`{embeddedApps.map((app) => (`