From 9bb7feaa0c08427fc58156b8170364fc389138c7 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Wed, 18 Feb 2026 23:46:05 -0500
Subject: [PATCH] fix: enable scrolling in node editor panel sidebar

Add min-h-0 to flex containers in the ancestor chain so overflow-y-auto
actually triggers instead of content overflowing off-screen.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/tree-editor/NodeEditorPanel.tsx  | 8 ++++----
 frontend/src/components/tree-editor/TreeEditorLayout.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/tree-editor/NodeEditorPanel.tsx b/frontend/src/components/tree-editor/NodeEditorPanel.tsx
index 64797a02..d56d0e6b 100644
--- a/frontend/src/components/tree-editor/NodeEditorPanel.tsx
+++ b/frontend/src/components/tree-editor/NodeEditorPanel.tsx
@@ -162,9 +162,9 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
   const isRoot = treeStructure?.id === nodeId
 
   return (
-    <div ref={panelRef} className="flex h-full w-[400px] shrink-0 flex-col border-l border-border bg-card">
+    <div ref={panelRef} className="flex h-full min-h-0 w-[400px] shrink-0 flex-col border-l border-border bg-card">
       {/* Header */}
-      <div className="flex items-center gap-2 border-b border-border px-4 py-3">
+      <div className="flex items-center gap-2 border-b border-border px-4 py-3 shrink-0">
         <span className={cn('flex h-5 w-5 shrink-0 items-center justify-center rounded', config.badgeClass)}>
           <TypeIcon className="h-3 w-3" />
         </span>
@@ -175,14 +175,14 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
       </div>
 
       {/* Body — scrollable form area */}
-      <div className="flex-1 overflow-y-auto px-4 py-3">
+      <div className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
         {draft.type === 'decision' && <NodeFormDecision node={draft} onUpdate={handleDraftUpdate} />}
         {draft.type === 'action' && <NodeFormAction node={draft} onUpdate={handleDraftUpdate} />}
         {draft.type === 'solution' && <NodeFormResolution node={draft} onUpdate={handleDraftUpdate} />}
       </div>
 
       {/* Footer */}
-      <div className="flex items-center gap-2 border-t border-border px-4 py-3">
+      <div className="flex items-center gap-2 border-t border-border px-4 py-3 shrink-0">
         <button
           onClick={handleSave}
           disabled={!isDirty}
diff --git a/frontend/src/components/tree-editor/TreeEditorLayout.tsx b/frontend/src/components/tree-editor/TreeEditorLayout.tsx
index c622ff71..939a4c6f 100644
--- a/frontend/src/components/tree-editor/TreeEditorLayout.tsx
+++ b/frontend/src/components/tree-editor/TreeEditorLayout.tsx
@@ -33,7 +33,7 @@ export function TreeEditorLayout({
   return (
     <div
       className={cn(
-        'flex flex-1 overflow-hidden',
+        'flex min-h-0 flex-1 overflow-hidden',
         isMobile ? 'flex-col' : 'flex-row'
       )}
     >