Skip to content

feat: make task panels resizable #18590

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 27, 2025
Merged

feat: make task panels resizable #18590

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3172791
feat: make task panels resizable
BrunoQuaresma Jun 25, 2025
d5bed55
Fix content height to fit panel
BrunoQuaresma Jun 26, 2025
529bb6f
Merge branch 'main' of https://github.com/coder/coder into bq/task-re…
BrunoQuaresma Jun 27, 2025
b2133ed
fmt
BrunoQuaresma Jun 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@
"react-helmet-async": "2.0.5",
"react-markdown": "9.0.3",
"react-query": "npm:@tanstack/[email protected]",
"react-resizable-panels": "3.0.3",
"react-router-dom": "6.26.2",
"react-syntax-highlighter": "15.6.1",
"react-textarea-autosize": "8.5.9",
Expand Down
14 changes: 14 additions & 0 deletions site/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion site/src/pages/TaskPage/TaskApps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down
15 changes: 10 additions & 5 deletions site/src/pages/TaskPage/TaskPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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>
</>
);
};
Expand Down
11 changes: 1 addition & 10 deletions site/src/pages/TaskPage/TaskSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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>
Expand Down
Loading