fix: prevent settings panel from collapsing graph canvas

The center column was a flex column with the canvas as flex-1 min-h-0
and the settings panel as shrink-0. When settings content grew tall
(especially with the orchestration mode panel expanded), the canvas
collapsed to zero height.

Switch the center column to a scrollable container with the canvas
having a guaranteed minimum height via clamp(360px, 50vh, 100%).
Settings flow naturally below and the whole column scrolls.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-04-06 23:33:59 +02:00
co-authored by Copilot
parent f4cb4c768b
commit 5ac6980b3f
+4 -4
View File
@@ -490,7 +490,7 @@ export function WorkflowEditor({
</div>
{/* Center column: validation + canvas + settings */}
<div className="flex min-w-0 flex-1 flex-col">
<div className="min-w-0 flex-1 overflow-y-auto">
{/* Validation banner */}
<div className="px-5 pt-4">
{issues.length > 0 ? (
@@ -517,8 +517,8 @@ export function WorkflowEditor({
)}
</div>
{/* Graph canvas */}
<div className="min-h-0 flex-1 px-5 pb-2 pt-4">
{/* Graph canvas — guaranteed minimum height so settings never collapse it */}
<div className="min-h-[360px] px-5 pb-2 pt-4" style={{ height: 'clamp(360px, 50vh, 100%)' }}>
<WorkflowGraphCanvas
availableModels={availableModels}
onEdgeSelect={setSelectedEdgeId}
@@ -652,7 +652,7 @@ function WorkflowSettingsPanel({
onChange: (workflow: WorkflowDefinition) => void;
}) {
return (
<div className="shrink-0 border-t border-[var(--color-border)] px-5 py-4">
<div className="border-t border-[var(--color-border)] px-5 py-4">
<h4 className="mb-3 text-[12px] font-semibold uppercase tracking-wider text-[var(--color-text-muted)]">
Settings
</h4>