From d7dcd23f687cf77da91c190246744d208c341cc0 Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Fri, 14 Aug 2026 22:15:08 -0700
Subject: [PATCH] Tighten YAML workflow editor layout

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../src/features/workflows/ui/WorkflowDialog.tsx | 16 +++++++++-------
 .../workflows/ui/WorkflowFormBuilder.tsx         | 10 +++++-----
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/desktop/src/features/workflows/ui/WorkflowDialog.tsx b/desktop/src/features/workflows/ui/WorkflowDialog.tsx
index 0e4ad3406..c61edf080 100644
--- a/desktop/src/features/workflows/ui/WorkflowDialog.tsx
+++ b/desktop/src/features/workflows/ui/WorkflowDialog.tsx
@@ -141,10 +141,10 @@ function WorkflowNameEditor({
 
   if (editing) {
     return (
-      <div className="flex h-7 items-center gap-1.5">
+      <div className="flex h-6 items-center gap-1.5">
         <Input
           aria-label="Workflow name"
-          className="h-7 w-72 px-2 font-mono text-sm"
+          className="h-6 w-72 px-2 font-mono text-sm"
           disabled={disabled}
           onChange={(event) => setDraft(event.target.value)}
           onKeyDown={(event) => {
@@ -177,7 +177,7 @@ function WorkflowNameEditor({
   }
 
   return (
-    <div className="inline-flex h-7 max-w-full min-w-0 items-center gap-1.5 font-mono text-sm text-muted-foreground">
+    <div className="inline-flex h-6 max-w-full min-w-0 items-center gap-1.5 font-mono text-sm text-muted-foreground">
       <span className="min-w-0 truncate">
         {generating ? "Generating name…" : name || "Untitled workflow"}
       </span>
@@ -415,9 +415,11 @@ export function WorkflowDialog({
         open={open && savedWebhookInfo === null}
       >
         <DialogContent className="flex h-[88vh] max-h-[88vh] w-[calc(100vw-2rem)] max-w-6xl flex-col gap-0 overflow-hidden p-0">
-          <DialogHeader className="flex flex-shrink-0 flex-row items-center justify-between gap-6 border-b border-border px-6 py-5 pr-14 text-left">
-            <div className="space-y-0.5">
-              <DialogTitle>{TITLES[mode]}</DialogTitle>
+          <DialogHeader className="flex flex-shrink-0 flex-row items-center justify-between gap-6 space-y-0 px-6 pt-3 pr-14 pb-2 text-left">
+            <div className="space-y-0">
+              <DialogTitle className="text-lg leading-tight">
+                {TITLES[mode]}
+              </DialogTitle>
               <DialogDescription className="sr-only">
                 {mode === "edit"
                   ? "Update when this workflow runs and what it does."
@@ -494,7 +496,7 @@ export function WorkflowDialog({
             </p>
           ) : null}
 
-          <div className="flex flex-shrink-0 items-center justify-between gap-4 border-t border-border px-6 py-4">
+          <div className="flex flex-shrink-0 items-center justify-between gap-4 px-6 pt-2 pb-4">
             <Tabs onValueChange={handleEditorModeChange} value={editorMode}>
               <TabsList aria-label="Workflow editor mode" className="h-8 p-0.5">
                 <TabsTrigger
diff --git a/desktop/src/features/workflows/ui/WorkflowFormBuilder.tsx b/desktop/src/features/workflows/ui/WorkflowFormBuilder.tsx
index e3c26c07b..b5bb4848a 100644
--- a/desktop/src/features/workflows/ui/WorkflowFormBuilder.tsx
+++ b/desktop/src/features/workflows/ui/WorkflowFormBuilder.tsx
@@ -521,18 +521,18 @@ export function WorkflowFormBuilder({
         ) : null}
 
         {mode === "yaml" ? (
-          <div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-6">
-            <div className="max-w-md">{scopeField}</div>
-            <div className="flex h-full min-h-[320px] flex-col space-y-1.5">
+          <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden px-6 pb-3 pt-3">
+            <div className="max-w-md flex-shrink-0">{scopeField}</div>
+            <div className="flex min-h-0 flex-1 flex-col gap-1.5">
               <Textarea
                 aria-label="Workflow YAML"
                 autoCapitalize="off"
-                className="min-h-[320px] flex-1 resize-none font-mono text-xs"
+                className="min-h-0 flex-1 resize-none font-mono text-xs"
                 disabled={disabled}
                 onChange={(event) => onChange(event.target.value)}
                 value={yaml}
               />
-              <p className="text-xs text-muted-foreground">
+              <p className="flex-shrink-0 text-xs text-muted-foreground">
                 Edit the raw YAML definition directly.
               </p>
             </div>