From fc64b8becfc49286a89d88c95663e509ddf48db0 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Mon, 29 Jun 2026 14:48:01 +0800
Subject: [PATCH] feat: enhance WorkflowConfigPanel layout with improved button
 positioning and spacing

---
 .../_components/workflow-config-sidebar.tsx   | 50 +++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx b/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
index 01d823a..149003b 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
+++ b/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
@@ -127,38 +127,36 @@ export function WorkflowConfigPanel({
       >
         <span className="h-12 w-1 rounded-full bg-slate-300/80 transition-colors group-hover:bg-blue-400" />
       </div>
-      <section className="pointer-events-auto flex min-h-0 w-full flex-col overflow-hidden rounded-lg bg-white shadow-[0_18px_45px_rgba(15,23,42,0.18)] backdrop-blur">
+      <section className="pointer-events-auto relative flex min-h-0 w-full flex-col overflow-hidden rounded-lg bg-white shadow-[0_18px_45px_rgba(15,23,42,0.18)] backdrop-blur">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="absolute right-2 top-2 z-10 size-7 shrink-0 rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-700"
+          aria-label="关闭属性面板"
+          onClick={onClose}
+        >
+          <XIcon className="size-4" />
+        </Button>
         <ScrollArea className="min-h-0 flex-1">
-          <div className="py-3">
+          <div className="pb-3 pt-11">
             <div className="px-3 pb-2">
               <div className="overflow-hidden rounded-md border border-slate-200 bg-white">
                 <div className="px-3 py-3">
-                  <div className="flex items-center justify-between gap-3">
-                    <div className="flex min-w-0 flex-1 items-center gap-2.5">
-                      <WorkflowNodeIcon
-                        icon={panelIcon}
-                        size="sm"
-                        className="rounded-md shadow-none"
+                  <div className="flex min-w-0 items-center gap-2.5">
+                    <WorkflowNodeIcon
+                      icon={panelIcon}
+                      size="sm"
+                      className="rounded-md shadow-none"
+                    />
+                    <div className="min-w-0 flex-1">
+                      <Input
+                        value={panelTitle}
+                        placeholder={selectedBranchItem ? selectedBranchItem.id : selectedNodeSpec?.title || selectedNode.type}
+                        className="h-7 w-full rounded-md border-slate-200 bg-slate-50 px-2 text-sm font-semibold leading-5 text-slate-900 shadow-none transition-colors hover:border-slate-300 hover:bg-white focus-visible:border-blue-300 focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-blue-100"
+                        onChange={(event) => updatePanelTitle(event.target.value)}
                       />
-                      <div className="min-w-0 flex-1">
-                        <Input
-                          value={panelTitle}
-                          placeholder={selectedBranchItem ? selectedBranchItem.id : selectedNodeSpec?.title || selectedNode.type}
-                          className="h-7 w-full rounded-md border-slate-200 bg-slate-50 px-2 text-sm font-semibold leading-5 text-slate-900 shadow-none transition-colors hover:border-slate-300 hover:bg-white focus-visible:border-blue-300 focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-blue-100"
-                          onChange={(event) => updatePanelTitle(event.target.value)}
-                        />
-                      </div>
                     </div>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="size-7 shrink-0 rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-700"
-                      aria-label="关闭属性面板"
-                      onClick={onClose}
-                    >
-                      <XIcon className="size-4" />
-                    </Button>
                   </div>
                   {panelDescription ? (
                     <div className="mt-2 line-clamp-2 text-xs leading-5 text-slate-500">