Wrap workflow node library in scroll area

This commit is contained in:
mlogclub
2026-06-22 22:45:15 +08:00
parent 5c59f0ad8a
commit 4ae37f48f1
@@ -24,6 +24,7 @@ import { AlertCircleIcon, CheckCircle2Icon } from "lucide-react"
import { useCallback, useEffect, useMemo, useRef, useState } from "react" import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { import {
Popover, Popover,
PopoverContent, PopoverContent,
@@ -331,36 +332,40 @@ export function WorkflowEditor({
return ( return (
<ResizablePanelGroup orientation="horizontal" className="h-full min-h-0"> <ResizablePanelGroup orientation="horizontal" className="h-full min-h-0">
<ResizablePanel defaultSize="18%" minSize="12%" maxSize="34%" className="min-h-0"> <ResizablePanel defaultSize="18%" minSize="12%" maxSize="34%" className="min-h-0">
<aside className="h-full min-h-0 overflow-y-auto bg-muted/20 p-3"> <aside className="h-full min-h-0 bg-muted/20">
<div className="mb-3 text-sm font-medium"></div> <ScrollArea className="h-full min-h-0">
<div className="space-y-2"> <div className="p-3">
{nodeSpecs.map((spec) => ( <div className="mb-3 text-sm font-medium"></div>
<button <div className="space-y-2">
key={spec.type} {nodeSpecs.map((spec) => (
type="button" <button
onPointerDown={(event) => onNodePointerDown(event, spec)} key={spec.type}
onClick={() => { type="button"
if (suppressNextClickRef.current) { onPointerDown={(event) => onNodePointerDown(event, spec)}
suppressNextClickRef.current = false onClick={() => {
return if (suppressNextClickRef.current) {
} suppressNextClickRef.current = false
addNode(spec) return
}} }
className="flex w-full cursor-grab rounded-md border bg-background px-3 py-2 text-left text-sm hover:bg-muted active:cursor-grabbing" addNode(spec)
> }}
<span className="min-w-0"> className="flex w-full cursor-grab rounded-md border bg-background px-3 py-2 text-left text-sm hover:bg-muted active:cursor-grabbing"
<span className="block truncate font-medium">{spec.title}</span> >
<span className="mt-1 line-clamp-2 text-xs text-muted-foreground"> <span className="min-w-0">
{spec.description} <span className="block truncate font-medium">{spec.title}</span>
</span> <span className="mt-1 line-clamp-2 text-xs text-muted-foreground">
<span className="mt-1 flex gap-2 text-[11px] text-muted-foreground"> {spec.description}
<span> {spec.inputSchema?.length ?? 0}</span> </span>
<span> {spec.outputSchema?.length ?? 0}</span> <span className="mt-1 flex gap-2 text-[11px] text-muted-foreground">
</span> <span> {spec.inputSchema?.length ?? 0}</span>
</span> <span> {spec.outputSchema?.length ?? 0}</span>
</button> </span>
))} </span>
</div> </button>
))}
</div>
</div>
</ScrollArea>
</aside> </aside>
</ResizablePanel> </ResizablePanel>
<ResizableHandle withHandle /> <ResizableHandle withHandle />