From d295ae5d887140ae6ef655a4a0c3bedd0852784a Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Wed, 18 Feb 2026 01:14:53 -0500
Subject: [PATCH] fix: make canvas card expanded area scrollable with sticky
 header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/tree-editor/TreeCanvasNode.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/tree-editor/TreeCanvasNode.tsx b/frontend/src/components/tree-editor/TreeCanvasNode.tsx
index 0dc99d6e..22f029f7 100644
--- a/frontend/src/components/tree-editor/TreeCanvasNode.tsx
+++ b/frontend/src/components/tree-editor/TreeCanvasNode.tsx
@@ -166,7 +166,8 @@ export function TreeCanvasNode({
         className={cn(
           'flex items-center gap-2 px-3 py-2.5',
           !isExpanded && 'cursor-pointer hover:bg-accent/50 rounded-t-xl',
-          !isExpanded && 'rounded-xl'
+          !isExpanded && 'rounded-xl',
+          isExpanded && 'sticky top-0 z-10 bg-card rounded-t-xl'
         )}
         onClick={!isExpanded ? handleCardClick : undefined}
       >
@@ -322,7 +323,7 @@ export function TreeCanvasNode({
 
       {/* Expanded editing area */}
       {isExpanded && (
-        <div className="border-t border-border px-3 pb-3 pt-3">
+        <div className="border-t border-border px-3 pb-3 pt-3 max-h-[70vh] overflow-y-auto">
           {/* Validation errors */}
           {(hasError || hasWarning) && (
             <div className="mb-3 space-y-1">