From 119d17819b705085bcd136ef10d49013a1a1cb0a Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Wed, 1 Apr 2026 06:52:50 +0000
Subject: [PATCH] design: overhaul Edit Procedure page layout and color system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move procedure name into inline-editable toolbar input; replace static h1
- Toolbar now uses bg-sidebar for proper depth hierarchy vs bg-card config zone
- Config zone (Details/Intake/Schedule accordions) gets explicit bg-card + border-b
  creating clear visual separation from the step canvas below
- Step canvas switches to bg-page background for distinct work surface
- Replace all hover:bg-accent (orange) with hover:bg-elevated or hover:bg-white/[0.08]
  throughout toolbar, accordion headers, step cards, and editor buttons
- Fix step number badges: bg-accent (orange) → bg-white/[0.10] in StepList + StepEditor
- Fix procedure_end step background: bg-accent/50 → bg-elevated/40
- CollapsibleEditorSection: hover:bg-accent/50 → hover:bg-white/[0.05]
- Input fields in StepEditor: bg-card → bg-elevated for depth inside card surfaces
- Move Content Type selector out of "More Options" into main step editor body
- Rename "More Options" → "Advanced Options" for clarity
- Replace Shield icon with ListOrdered for Steps section heading (semantic fix)
- Bottom Add Step button: better contrast with border-white/20 + hover:bg-elevated/30
- Remove Name field from Details accordion (now lives in toolbar)
- Update Details accordion summary: shows tags, visibility, description preview
- Dirty indicator: "Unsaved changes" text → compact amber dot with tooltip

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../CollapsibleEditorSection.tsx              |   2 +-
 .../procedural-editor/StepEditor.tsx          |  74 ++++++------
 .../components/procedural-editor/StepList.tsx |  18 +--
 frontend/src/pages/ProceduralEditorPage.tsx   | 110 +++++++++---------
 4 files changed, 100 insertions(+), 104 deletions(-)

diff --git a/frontend/src/components/procedural-editor/CollapsibleEditorSection.tsx b/frontend/src/components/procedural-editor/CollapsibleEditorSection.tsx
index 2325e4ff..e7d8b95c 100644
--- a/frontend/src/components/procedural-editor/CollapsibleEditorSection.tsx
+++ b/frontend/src/components/procedural-editor/CollapsibleEditorSection.tsx
@@ -41,7 +41,7 @@ export function CollapsibleEditorSection({
         onClick={handleToggle}
         aria-expanded={isExpanded}
         aria-controls={sectionId}
-        className="flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-accent/50"
+        className="flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-white/[0.05]"
       >
         <ChevronRight
           className={cn(
diff --git a/frontend/src/components/procedural-editor/StepEditor.tsx b/frontend/src/components/procedural-editor/StepEditor.tsx
index af469402..358ddb57 100644
--- a/frontend/src/components/procedural-editor/StepEditor.tsx
+++ b/frontend/src/components/procedural-editor/StepEditor.tsx
@@ -30,7 +30,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
           <span className="text-sm font-medium text-muted-foreground">Edit Section Header</span>
           <button
             onClick={onCollapse}
-            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="rounded p-1 text-muted-foreground hover:bg-elevated hover:text-foreground"
           >
             <ChevronUp className="h-4 w-4" />
           </button>
@@ -42,7 +42,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             value={step.title}
             onChange={(e) => onUpdate({ title: e.target.value })}
             placeholder="Section title"
-            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
       </div>
@@ -54,14 +54,14 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
       {/* Header */}
       <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-xs font-medium text-foreground">
+          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-white/[0.10] text-xs font-medium text-foreground">
             {stepNumber}
           </span>
           <span className="text-sm font-medium text-foreground">Edit Step</span>
         </div>
         <button
           onClick={onCollapse}
-          className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+          className="rounded p-1 text-muted-foreground hover:bg-elevated hover:text-foreground"
         >
           <ChevronUp className="h-4 w-4" />
         </button>
@@ -75,7 +75,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             type="text"
             value={step.title}
             onChange={(e) => onUpdate({ title: e.target.value })}
-            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
@@ -91,7 +91,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             onChange={(e) => onUpdate({ estimated_minutes: e.target.value ? parseInt(e.target.value) : undefined })}
             placeholder="—"
             min={1}
-            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
@@ -103,7 +103,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             onChange={(e) => onUpdate({ description: e.target.value })}
             placeholder="Step instructions. Use [VAR:name] for variables."
             rows={4}
-            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
           {availableVariables.length > 0 && (
             <div className="mt-1 flex flex-wrap gap-1">
@@ -132,44 +132,44 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             onChange={(e) => onUpdate({ commands: e.target.value || undefined })}
             placeholder="Install-WindowsFeature AD-Domain-Services -IncludeManagementTools"
             rows={3}
-            className="w-full rounded border border-border bg-card px-3 py-2 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-border bg-elevated px-3 py-2 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
-        {/* More Options toggle */}
+        {/* Content Type */}
+        <div>
+          <label className="mb-1 block text-xs font-medium text-muted-foreground">Type</label>
+          <div className="flex gap-1">
+            {CONTENT_TYPE_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => onUpdate({ content_type: opt.value })}
+                className={cn(
+                  'rounded px-2 py-1 text-xs font-medium transition-colors',
+                  step.content_type === opt.value
+                    ? 'bg-white/15 ' + opt.color
+                    : 'text-muted-foreground hover:bg-elevated hover:text-foreground'
+                )}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Advanced Options toggle */}
         <button
           type="button"
           onClick={() => setShowMore(!showMore)}
-          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-muted-foreground"
+          className="flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
         >
           <Settings2 className="h-3 w-3" />
-          More Options
+          Advanced Options
           {showMore ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
         </button>
 
         {showMore && (
           <div className="space-y-4 border-t border-border pt-4">
-            {/* Content Type */}
-            <div>
-              <label className="mb-1 block text-xs font-medium text-muted-foreground">Content Type</label>
-              <div className="flex gap-1">
-                {CONTENT_TYPE_OPTIONS.map((opt) => (
-                  <button
-                    key={opt.value}
-                    onClick={() => onUpdate({ content_type: opt.value })}
-                    className={cn(
-                      'rounded px-2 py-1 text-xs font-medium transition-colors',
-                      step.content_type === opt.value
-                        ? 'bg-white/15 ' + opt.color
-                        : 'text-muted-foreground hover:bg-accent hover:text-muted-foreground'
-                    )}
-                  >
-                    {opt.label}
-                  </button>
-                ))}
-              </div>
-            </div>
-
             {/* Warning text */}
             {(step.content_type === 'warning' || step.warning_text) && (
               <div>
@@ -195,7 +195,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                 value={step.expected_outcome || ''}
                 onChange={(e) => onUpdate({ expected_outcome: e.target.value || undefined })}
                 placeholder="Server should respond with..."
-                className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
 
@@ -211,7 +211,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   value={step.verification_prompt || ''}
                   onChange={(e) => onUpdate({ verification_prompt: e.target.value || undefined })}
                   placeholder="Confirm the role was installed"
-                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                  className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                 />
               </div>
               <div>
@@ -219,7 +219,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                 <select
                   value={step.verification_type || ''}
                   onChange={(e) => onUpdate({ verification_type: e.target.value as 'checkbox' | 'text_input' || undefined })}
-                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                  className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                 >
                   <option value="">None</option>
                   <option value="checkbox">Checkbox (confirm done)</option>
@@ -240,7 +240,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   value={step.reference_url || ''}
                   onChange={(e) => onUpdate({ reference_url: e.target.value || undefined })}
                   placeholder="https://learn.microsoft.com/..."
-                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                  className="w-full rounded border border-border bg-elevated px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                 />
               </div>
               <div className="flex items-end pb-1">
@@ -267,7 +267,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                 onChange={(e) => onUpdate({
                   library_visibility: e.target.value === '' ? undefined : e.target.value as 'team' | 'public'
                 })}
-                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-lg border border-border bg-elevated px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               >
                 <option value="">Inherit from flow</option>
                 <option value="team">Team only</option>
diff --git a/frontend/src/components/procedural-editor/StepList.tsx b/frontend/src/components/procedural-editor/StepList.tsx
index 981d7dd6..330ec701 100644
--- a/frontend/src/components/procedural-editor/StepList.tsx
+++ b/frontend/src/components/procedural-editor/StepList.tsx
@@ -1,5 +1,5 @@
 import { useRef, useEffect, useCallback, type ReactNode } from 'react'
-import { Plus, GripVertical, Trash2, ChevronDown, CheckCircle2, AlertTriangle, Info, Zap, Shield, SeparatorHorizontal } from 'lucide-react'
+import { Plus, GripVertical, Trash2, ChevronDown, CheckCircle2, AlertTriangle, Info, Zap, ListOrdered, SeparatorHorizontal } from 'lucide-react'
 import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
 import type { DragEndEvent } from '@dnd-kit/core'
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable'
@@ -104,7 +104,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
     <div>
       <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <Shield className="h-5 w-5 text-muted-foreground" />
+          <ListOrdered className="h-5 w-5 text-muted-foreground" />
           <h2 className="text-lg font-semibold text-foreground">Steps</h2>
           <span className="text-sm text-muted-foreground">
             ({procedureSteps.length} step{procedureSteps.length !== 1 ? 's' : ''}
@@ -114,14 +114,14 @@ export function StepList({ onStepContextMenu }: StepListProps) {
         <div className="flex items-center gap-2">
           <button
             onClick={() => addSectionHeader()}
-            className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-elevated hover:text-foreground"
           >
             <SeparatorHorizontal className="h-3.5 w-3.5" />
             Add Section
           </button>
           <button
             onClick={() => addStep()}
-            className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-elevated hover:text-foreground"
           >
             <Plus className="h-3.5 w-3.5" />
             Add Step
@@ -138,7 +138,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                 return (
                   <div
                     key={step.id}
-                    className="flex items-center gap-2 rounded-lg border border-dashed border-border bg-accent/50 px-3 py-2"
+                    className="flex items-center gap-2 rounded-lg border border-dashed border-border bg-elevated/40 px-3 py-2"
                   >
                     <CheckCircle2 className="h-4 w-4 text-emerald-400/50" />
                     <input
@@ -238,7 +238,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                     <div
                       className={cn(
                         'group flex flex-col rounded-xl border border-border px-3 py-2.5 transition-colors',
-                        'hover:border-primary/30 hover:bg-accent/50',
+                        'hover:border-white/[0.15] hover:bg-elevated',
                         isGhost && 'border-l-2 border-dashed border-l-primary/40! opacity-60'
                       )}
                       data-step-id={step.id}
@@ -254,7 +254,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                           <GripVertical className="h-4 w-4" />
                         </button>
 
-                        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-xs font-medium text-muted-foreground">
+                        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/[0.10] text-xs font-medium text-muted-foreground">
                           {stepNumber}
                         </span>
 
@@ -277,7 +277,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
 
                         <button
                           onClick={() => setExpandedStepId(step.id)}
-                          className="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+                          className="shrink-0 rounded p-1 text-muted-foreground hover:bg-elevated hover:text-foreground"
                         >
                           <ChevronDown className="h-3.5 w-3.5" />
                         </button>
@@ -324,7 +324,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
       {/* Add step button at bottom */}
       <button
         onClick={() => addStep()}
-        className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-border py-2 text-sm text-muted-foreground transition-colors hover:border-primary/30 hover:text-muted-foreground"
+        className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-white/20 py-2 text-sm text-muted-foreground transition-colors hover:border-primary/40 hover:bg-elevated/30 hover:text-foreground"
       >
         <Plus className="h-3.5 w-3.5" />
         Add Step
diff --git a/frontend/src/pages/ProceduralEditorPage.tsx b/frontend/src/pages/ProceduralEditorPage.tsx
index 66d533da..a405d0e6 100644
--- a/frontend/src/pages/ProceduralEditorPage.tsx
+++ b/frontend/src/pages/ProceduralEditorPage.tsx
@@ -241,9 +241,9 @@ export function ProceduralEditorPage() {
 
   // Summary strings for collapsed sections
   const detailsSummary = [
-    name ? `"${name}"` : '"Untitled"',
     tags.length > 0 ? `${tags.length} tag${tags.length !== 1 ? 's' : ''}` : 'No tags',
     isPublic ? 'Public' : 'Private',
+    description ? `${description.slice(0, 40)}${description.length > 40 ? '\u2026' : ''}` : 'No description',
   ].join(' \u00b7 ')
 
   const scheduleSummary = getScheduleSummary(schedule, scheduleTargetList)
@@ -265,37 +265,42 @@ export function ProceduralEditorPage() {
       {/* Main content column */}
       <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
       {/* Toolbar — sticky */}
-      <div className="flex shrink-0 items-center justify-between border-b border-border bg-card px-4 py-2">
-        <div className="flex items-center gap-3">
-          <button
-            onClick={() => navigate('/trees')}
-            className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
-          >
-            <ArrowLeft className="h-5 w-5" />
-          </button>
-          <div className="flex items-center gap-2">
-            {isMaintenance
-              ? <Wrench className="h-5 w-5 text-amber-400" />
-              : <ListOrdered className="h-5 w-5 text-muted-foreground" />}
-            <h1 className="text-lg font-bold text-foreground">
-              {isEditMode ? `Edit ${flowLabel}` : `New ${flowLabel}`}
-              {name && <span className="ml-2 font-normal text-muted-foreground">— {name}</span>}
-            </h1>
-          </div>
+      <div className="flex shrink-0 items-center gap-3 border-b border-border bg-sidebar px-4 py-2.5">
+        <button
+          onClick={() => navigate('/trees')}
+          className="shrink-0 rounded p-1.5 text-muted-foreground transition-colors hover:bg-white/[0.08] hover:text-foreground"
+        >
+          <ArrowLeft className="h-4 w-4" />
+        </button>
+
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          {isMaintenance
+            ? <Wrench className="h-4 w-4 shrink-0 text-amber-400" />
+            : <ListOrdered className="h-4 w-4 shrink-0 text-muted-foreground" />}
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder={`Untitled ${flowLabel}`}
+            className="min-w-0 flex-1 bg-transparent text-sm font-semibold text-heading placeholder:text-muted-foreground focus:outline-none"
+          />
+          {isDirty && (
+            <span
+              title="Unsaved changes"
+              className="h-1.5 w-1.5 shrink-0 rounded-full bg-amber-400"
+            />
+          )}
         </div>
 
-        <div className="flex items-center gap-2">
-          {isDirty && (
-            <span className="text-xs text-muted-foreground">Unsaved changes</span>
-          )}
+        <div className="flex shrink-0 items-center gap-2">
           <button
             onClick={() => editorAI.isOpen ? editorAI.closePanel() : editorAI.openPanel()}
             title="Toggle AI Assist panel"
             className={cn(
-              'flex items-center gap-1.5 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
+              'flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm font-medium transition-colors',
               editorAI.isOpen
-                ? 'bg-accent-dim text-primary border-primary/30'
-                : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                ? 'border-primary/30 bg-accent-dim text-primary'
+                : 'text-muted-foreground hover:bg-white/[0.08] hover:text-foreground'
             )}
           >
             <Sparkles className="h-4 w-4" />
@@ -318,8 +323,8 @@ export function ProceduralEditorPage() {
         </div>
       </div>
 
-      {/* Collapsible sections */}
-      <div className="shrink-0">
+      {/* Config zone */}
+      <div className="shrink-0 border-b border-border bg-card">
         <CollapsibleEditorSection
           title="Details"
           icon={<Settings className="h-4 w-4" />}
@@ -328,17 +333,6 @@ export function ProceduralEditorPage() {
           onToggle={() => toggleSection('details')}
         >
           <div className="space-y-4">
-            <div>
-              <label className="mb-1 block text-sm font-medium text-muted-foreground">Name</label>
-              <input
-                type="text"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="e.g. Domain Controller Build"
-                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
-              />
-            </div>
-
             <div>
               <label className="mb-1 block text-sm font-medium text-muted-foreground">Description</label>
               <textarea
@@ -397,25 +391,27 @@ export function ProceduralEditorPage() {
         )}
       </div>
 
-      {/* Step List */}
-      <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
-        {validationErrors.length > 0 && (
-          <div className="px-4 py-3">
-            <ValidationSummary
-              errors={validationErrors.map((e): ValidationError => ({
-                nodeId: e.stepId,
-                field: e.field,
-                message: e.message,
-                severity: e.severity,
-              }))}
-              onSelectNode={handleSelectStep}
-              onFixWithAI={handleFixWithAI}
-              isFixing={isFixing}
-              itemLabel="step"
-            />
-          </div>
-        )}
-        <StepList onStepContextMenu={editorAI.openContextMenu} />
+      {/* Step canvas */}
+      <div className="min-h-0 flex-1 overflow-y-auto bg-page">
+        <div className="px-5 py-5">
+          {validationErrors.length > 0 && (
+            <div className="mb-4">
+              <ValidationSummary
+                errors={validationErrors.map((e): ValidationError => ({
+                  nodeId: e.stepId,
+                  field: e.field,
+                  message: e.message,
+                  severity: e.severity,
+                }))}
+                onSelectNode={handleSelectStep}
+                onFixWithAI={handleFixWithAI}
+                isFixing={isFixing}
+                itemLabel="step"
+              />
+            </div>
+          )}
+          <StepList onStepContextMenu={editorAI.openContextMenu} />
+        </div>
       </div>
 
       {editorAI.contextMenu && (