chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: enable scrolling in node editor panel sidebar

Browse Source 
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>
This commit is contained in:
chihlasm
2026-02-18 23:46:05 -05:00
parent 33427cbcce
commit 9bb7feaa0c
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/tree-editor/NodeEditorPanel.tsx
View File

@@ -162,9 +162,9 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
const isRoot = treeStructure?.id === nodeId const isRoot = treeStructure?.id === nodeId
return ( 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 */} {/* 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)}> <span className={cn('flex h-5 w-5 shrink-0 items-center justify-center rounded', config.badgeClass)}>
<TypeIcon className="h-3 w-3" /> <TypeIcon className="h-3 w-3" />
</span> </span>
@@ -175,14 +175,14 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
</div> </div>
{/* Body — scrollable form area */} {/* 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 === 'decision' && <NodeFormDecision node={draft} onUpdate={handleDraftUpdate} />}
{draft.type === 'action' && <NodeFormAction node={draft} onUpdate={handleDraftUpdate} />} {draft.type === 'action' && <NodeFormAction node={draft} onUpdate={handleDraftUpdate} />}
{draft.type === 'solution' && <NodeFormResolution node={draft} onUpdate={handleDraftUpdate} />} {draft.type === 'solution' && <NodeFormResolution node={draft} onUpdate={handleDraftUpdate} />}
</div> </div>
{/* Footer */} {/* 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 <button
onClick={handleSave} onClick={handleSave}
disabled={!isDirty} disabled={!isDirty}

2
frontend/src/components/tree-editor/TreeEditorLayout.tsx
View File

@@ -33,7 +33,7 @@ export function TreeEditorLayout({
return ( return (
<div <div
className={cn( className={cn(
'flex flex-1 overflow-hidden', 'flex min-h-0 flex-1 overflow-hidden',
isMobile ? 'flex-col' : 'flex-row' isMobile ? 'flex-col' : 'flex-row'
)} )}
> >