feat: Resizable Panels (#873)

Author: Cahllagerfeld

package.json

@@ -52,6 +52,7 @@
 		"react-hook-form": "^7.55.0",
 		"react-joyride": "^2.9.3",
 		"react-markdown": "^9.0.3",
+		"react-resizable-panels": "^3.0.6",
 		"react-router-dom": "^6.27.0",
 		"reactflow": "^11.11.4",
 		"remark-gfm": "^4.0.1",

pnpm-lock.yaml

@@ -3,7 +3,7 @@ import { DeploymentDetailTabs } from "./tabs";
 
 export function DeploymentDetailHeader({ deploymentId }: { deploymentId: string }) {
 	return (
-		<section className="overflow-x-hidden border-b border-theme-border-moderate bg-theme-surface-primary">
+		<section className="shrink-0 overflow-x-hidden border-b border-theme-border-moderate bg-theme-surface-primary">
 			<div className="space-y-1 px-5 pt-5 lg:px-[80px]">
 				<DeploymentDetailHeaderInfo deploymentId={deploymentId} />
 				<DeploymentDetailTabs />

src/app/deployments/[deploymentId]/_layout/header/index.tsx

@@ -4,9 +4,9 @@ import { DeploymentDetailHeader } from "./_layout/header";
 export default function DeploymentDetailLayout() {
 	const { deploymentId } = useParams() as { deploymentId: string };
 	return (
-		<div className="flex h-full flex-1 flex-col">
+		<div className="flex h-full flex-col">
 			<DeploymentDetailHeader deploymentId={deploymentId} />
-			<section className="flex-1">
+			<section className="flex-1 overflow-y-auto">
 				<Outlet />
 			</section>
 		</div>

src/app/deployments/[deploymentId]/layout.tsx

@@ -19,7 +19,7 @@ export function PlaygroundInputs({ snapshot, submitDeployment, isInvoking, deplo
 	return (
 		<form
 			onSubmit={form.handleSubmit(handleSubmit)}
-			className="flex h-full w-full flex-col divide-y divide-theme-border-moderate pl-5 pr-5 xl:w-1/2 xl:pl-[80px] xl:pr-0"
+			className="flex h-full w-full flex-col divide-y divide-theme-border-moderate pl-5 pr-5 xl:pl-[80px] xl:pr-0"
 		>
 			<div className="flex h-full flex-col gap-5 overflow-auto py-5 xl:pr-5">
 				<p className="text-text-lg font-semibold">Input</p>

src/app/deployments/[deploymentId]/playground/_components/inputs/index.tsx

@@ -19,7 +19,7 @@ export function PlaygroundOutputsContent({ outputs, clearOutputs }: Props) {
 
 	return (
 		<div className="flex h-full w-full flex-col divide-y divide-theme-border-moderate">
-			<div className="flex h-full flex-col gap-5 overflow-auto py-5 pl-5 pr-5 xl:pr-0">
+			<div className="flex h-full flex-col gap-5 overflow-y-auto py-5 pl-5 pr-5 xl:pr-0">
 				<PlaygroundOutputsHeader activeView={activeView} setActiveView={setActiveView} />
 				<div>
 					<PlaygroundRunCard
@@ -44,7 +44,7 @@ export function PlaygroundOutputsContent({ outputs, clearOutputs }: Props) {
 								wordWrap: "on",
 								wordWrapColumn: 80
 							}}
-							className="h-full border border-theme-border-moderate"
+							className="h-full min-h-[200px] border border-theme-border-moderate md:min-h-[auto]"
 						/>
 					)
 				) : (

src/app/deployments/[deploymentId]/playground/_components/outputs/content.tsx

@@ -18,10 +18,10 @@ export function PlaygroundRunCard({ runId, runName, duration, success }: Props)
 	return (
 		<Box className="space-y-3 p-3">
 			<div className="flex flex-wrap items-start justify-between gap-1">
-				<div>
+				<div className="max-w-full">
 					<p className="text-text-xs text-theme-text-tertiary">Run</p>
 					<div className="flex items-center gap-1">
-						<p className="font-semibold">{runName}</p>
+						<p className="truncate font-semibold">{runName}</p>
 						<ExecutionStatusIcon
 							className="size-3 shrink-0"
 							status={success ? "completed" : "failed"}

src/app/deployments/[deploymentId]/playground/_components/outputs/run-card.tsx

@@ -4,6 +4,7 @@ import { PlaygroundInputs } from "./_components/inputs";
 import { useInvokeDeployment } from "@/data/deployment-invocations/invoke";
 import { PlaygroundOutputs } from "./_components/outputs";
 import { useToast } from "@zenml-io/react-component-library";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 type Props = {
 	snapshot: PipelineSnapshot;
@@ -53,20 +54,23 @@ export function PlaygroundPageContent({ snapshot, deployment }: Props) {
 	}
 
 	return (
-		<div className="flex h-full w-full flex-1 flex-col divide-y divide-theme-border-moderate xl:flex-row xl:divide-x xl:divide-y-0">
-			<PlaygroundInputs
-				deploymentId={deployment.id}
-				isInvoking={invokeDeployment.isPending}
-				submitDeployment={submitDeployment}
-				snapshot={snapshot}
-			/>
-			<div className="h-full w-full bg-theme-surface-primary xl:w-1/2 xl:pr-[80px]">
+		<PanelGroup direction="horizontal" className="h-full !flex-col md:!flex-row">
+			<Panel minSize={33} defaultSize={50}>
+				<PlaygroundInputs
+					deploymentId={deployment.id}
+					isInvoking={invokeDeployment.isPending}
+					submitDeployment={submitDeployment}
+					snapshot={snapshot}
+				/>
+			</Panel>
+			<PanelResizeHandle className="hidden w-[1px] bg-theme-border-moderate transition-colors duration-200 data-[resize-handle-state=drag]:bg-theme-border-bold data-[resize-handle-state=hover]:bg-theme-border-bold md:block" />
+			<Panel minSize={33} defaultSize={50} className="h-full bg-theme-surface-primary xl:pr-[80px]">
 				<PlaygroundOutputs
 					clearOutputs={() => invokeDeployment.reset()}
 					isInvoking={invokeDeployment.isPending}
 					outputs={invokeDeployment.data}
 				/>
-			</div>
-		</div>
+			</Panel>
+		</PanelGroup>
 	);
 }

src/app/deployments/[deploymentId]/playground/page.content.tsx

@@ -6,6 +6,7 @@ import { Codesnippet } from "@/components/CodeSnippet";
 import { HelpBox } from "@/components/fallback-pages/Helpbox";
 import { FallbackIcon } from "@/components/fallback/icon";
 import { SheetHeader } from "@/components/sheet/SheetHeader";
+import { ResizableSheetContent } from "@/components/sheet/resizable-sheet";
 import { Tick } from "@/components/Tick";
 import { useGithubPipelineSummary } from "@/data/github/pipeline-summary";
 import { useCopy } from "@/lib/copy";
@@ -15,7 +16,6 @@ import {
 	DialogTitle,
 	ProgressOutstanding,
 	Sheet,
-	SheetContent,
 	SheetTrigger,
 	Skeleton
 } from "@zenml-io/react-component-library";
@@ -43,7 +43,7 @@ export function GithubPipelineSheet({
 	return (
 		<Sheet open={open} onOpenChange={onOpenChange}>
 			<SheetTrigger className="w-full">{children}</SheetTrigger>
-			<SheetContent aria-describedby={undefined} className="w-[1000px] overflow-y-auto">
+			<ResizableSheetContent className="overflow-y-auto">
 				<SheetHeader />
 				<SecondaryHeader
 					displayName={displayName}
@@ -75,7 +75,7 @@ export function GithubPipelineSheet({
 						<NoPipelineContentFallback />
 					)}
 				</div>
-			</SheetContent>
+			</ResizableSheetContent>
 		</Sheet>
 	);
 }

src/app/overview/pipelines-grid/pipeline-sheet.tsx

@@ -5,7 +5,7 @@ export default function PipelineDetailLayout() {
 	return (
 		<div>
 			<PipelineDetailHeader />
-			<section className="px-5 pt-5 lg:px-[80px]">
+			<section className="p-5 lg:px-[80px]">
 				<Outlet />
 			</section>
 		</div>