Refactor workflow editor to overlay node config

web/app/dashboard/ai-workflows/_components/workflow-editor.tsx

@@ -393,9 +393,7 @@ export function WorkflowEditor({
         </>
       ) : null}
       <ResizablePanel
-        defaultSize={
-          nodeLibraryCollapsed ? (selectedNode ? "74%" : "100%") : selectedNode ? "56%" : "82%"
-        }
+        defaultSize={nodeLibraryCollapsed ? "100%" : "82%"}
         minSize="30%"
         className="min-h-0"
       >
@@ -447,24 +445,9 @@ export function WorkflowEditor({
             <MiniMap pannable zoomable />
           </ReactFlow>
           <WorkflowValidationBadge errors={validation.errors} valid={validation.valid} />
-          {pendingNodeDrag?.active ? (
-            <div
-              className="pointer-events-none fixed z-50 rounded-md border bg-background px-3 py-2 text-sm font-medium shadow-lg"
-              style={{
-                left: pendingNodeDrag.x + 12,
-                top: pendingNodeDrag.y + 12,
-              }}
-            >
-              {pendingNodeDrag.spec.title}
-            </div>
-          ) : null}
-        </section>
-      </ResizablePanel>
           {selectedNode ? (
-        <>
-          <ResizableHandle withHandle />
-          <ResizablePanel defaultSize="26%" minSize="18%" maxSize="40%" className="min-h-0">
-            <aside className="h-full min-h-0 overflow-y-auto bg-muted/10">
+            <aside className="absolute top-3 right-3 z-30 h-[calc(100%-1.5rem)] w-[min(380px,calc(100%-1.5rem))] overflow-hidden rounded-md border bg-background shadow-lg">
+              <ScrollArea className="h-full min-h-0">
                 <NodeConfigPanel
                   node={selectedNode}
                   nodeSpec={selectedNodeSpec}
@@ -481,10 +464,22 @@ export function WorkflowEditor({
                     </ul>
                   </div>
                 ) : null}
+              </ScrollArea>
             </aside>
-          </ResizablePanel>
-        </>
           ) : null}
+          {pendingNodeDrag?.active ? (
+            <div
+              className="pointer-events-none fixed z-50 rounded-md border bg-background px-3 py-2 text-sm font-medium shadow-lg"
+              style={{
+                left: pendingNodeDrag.x + 12,
+                top: pendingNodeDrag.y + 12,
+              }}
+            >
+              {pendingNodeDrag.spec.title}
+            </div>
+          ) : null}
+        </section>
+      </ResizablePanel>
     </ResizablePanelGroup>
   )
 }