From d1723ff5d79b83289faa88aacdc2c80ed9f215d5 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Sun, 28 Jun 2026 19:32:03 +0800
Subject: [PATCH] feat: improve layout and styling of WorkflowConfigPanel for
 better UI consistency

---
 .../_components/workflow-config-sidebar.tsx   | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 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 14a585e..b3c83ee 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
+++ b/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
@@ -93,8 +93,9 @@ export function WorkflowConfigPanel({
       <section className="pointer-events-auto flex min-h-0 w-full flex-col overflow-hidden rounded-xl border border-slate-200 bg-[#f8fafc] shadow-lg backdrop-blur">
         <div className="shrink-0 p-3 pb-2">
           <div className="overflow-hidden rounded-lg border border-slate-200 bg-white">
-            <div className="flex items-start justify-between gap-3 px-3 py-3">
-              <div className="flex min-w-0 items-start gap-2.5">
+            <div className="px-3 py-3">
+              <div className="flex items-center justify-between gap-3">
+                <div className="flex min-w-0 items-center gap-2.5">
                 <WorkflowNodeIcon
                   icon={panelIcon}
                   size="sm"
@@ -107,23 +108,24 @@ export function WorkflowConfigPanel({
                     className="h-6 border-transparent bg-transparent px-0 text-sm font-semibold leading-5 text-slate-900 shadow-none hover:border-transparent focus-visible:ring-0"
                     onChange={(event) => updatePanelTitle(event.target.value)}
                   />
-                  {panelDescription ? (
-                    <div className="mt-1 line-clamp-2 text-xs leading-5 text-slate-500">
-                      {panelDescription}
-                    </div>
-                  ) : null}
                 </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>
+                <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">
+                  {panelDescription}
+                </div>
+              ) : null}
             </div>
             {panelMeta ? (
               <div className="border-t border-slate-100 px-3 py-2">