From 9fc47907229d6d5c1b01da163792ebbfd1c27927 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 28 Mar 2026 17:37:37 +0800
Subject: [PATCH] fix: tighten workflow timeline spacing

---
 .../agents/AgentWorkflowPanelDarkV2.tsx       | 37 ++++++++-----------
 1 file changed, 16 insertions(+), 21 deletions(-)

diff --git a/components/agents/AgentWorkflowPanelDarkV2.tsx b/components/agents/AgentWorkflowPanelDarkV2.tsx
index 51a39c653..84d474716 100644
--- a/components/agents/AgentWorkflowPanelDarkV2.tsx
+++ b/components/agents/AgentWorkflowPanelDarkV2.tsx
@@ -691,12 +691,7 @@ export function AgentWorkflowPanelDarkV2({
                   >
                     <div className="mb-5 space-y-4">
                       <div className="mt-3">
-                        <div
-                          className="grid items-start gap-x-2 gap-y-3"
-                          style={{
-                            gridTemplateColumns: `repeat(${flattenedResolvedSteps.length}, minmax(0, 1fr))`,
-                          }}
-                        >
+                        <div className="agent-dark-scrollbar flex items-center gap-4 overflow-x-auto pb-2">
                         {flattenedResolvedSteps.map(({ step }, stepIndex) => {
                           const completed = isAgentWorkflowStepSelectionComplete({
                             step,
@@ -728,7 +723,7 @@ export function AgentWorkflowPanelDarkV2({
 
                           return (
                             <Fragment key={step.key}>
-                              <div className="group relative flex min-w-0 items-center gap-3 pr-2 text-left">
+                              <div className="group flex shrink-0 items-center gap-3 text-left">
                                 <button
                                   type="button"
                                   onClick={() => {
@@ -737,7 +732,7 @@ export function AgentWorkflowPanelDarkV2({
                                     setActiveEmbeddedStepKey(step.key);
                                     setActiveEmbeddedOptionDepth(1);
                                   }}
-                                  className="flex min-w-0 shrink-0 items-center gap-3 self-center text-left transition-transform duration-200 hover:-translate-y-[1px]"
+                                  className="flex shrink-0 items-center gap-3 self-center text-left transition-transform duration-200 hover:-translate-y-[1px]"
                                 >
                                   <span
                                     className={cn(
@@ -769,7 +764,7 @@ export function AgentWorkflowPanelDarkV2({
                                     </span>
                                   ) : null}
                                 </button>
-                                <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+                                <div className="flex shrink-0 items-center gap-2">
                                   {activeStepChildLabel ? (
                                     <span
                                       className={cn(
@@ -783,7 +778,7 @@ export function AgentWorkflowPanelDarkV2({
                                     </span>
                                   ) : null}
                                   {stepSelectedPath.length > 0 ? (
-                                    <div className="agent-dark-scrollbar flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto">
+                                    <div className="flex shrink-0 items-center gap-1.5">
                                       {stepSelectedPath.map((option, optionIndex) => {
                                         const optionDepth = optionIndex + 1;
                                         const optionLevelActive =
@@ -821,22 +816,22 @@ export function AgentWorkflowPanelDarkV2({
                                       })}
                                     </div>
                                   ) : (
-                                    <span className="truncate text-[10px] leading-none text-white/32">
+                                    <span className="shrink-0 text-[10px] leading-none text-white/32">
                                       待选择
                                     </span>
                                   )}
                                 </div>
-                                {stepIndex < flattenedResolvedSteps.length - 1 ? (
-                                  <div
-                                    className={cn(
-                                      "pointer-events-none absolute left-[calc(100%-4px)] top-3.5 h-px w-2",
-                                      stepIndex < activeEmbeddedStepIndex
-                                        ? "bg-emerald-400/35"
-                                        : "bg-white/10"
-                                    )}
-                                  />
-                                ) : null}
                               </div>
+                              {stepIndex < flattenedResolvedSteps.length - 1 ? (
+                                <div
+                                  className={cn(
+                                    "h-px w-8 shrink-0 rounded-full",
+                                    stepIndex < activeEmbeddedStepIndex
+                                      ? "bg-emerald-400/35"
+                                      : "bg-white/10"
+                                  )}
+                                />
+                              ) : null}
                             </Fragment>
                           );
                         })}