From dbd5fb2de4c3cefa9b52ff7d0964235e987b5485 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=88=B1=E7=AC=91=E7=9A=84=E6=AF=9B=E6=AF=9B=E8=99=AB?=
 <315515767@qq.com>
Date: Fri, 7 Aug 2026 18:54:26 +0800
Subject: [PATCH] =?UTF-8?q?fix(canvas):=20=E5=88=86=E9=95=9C=E8=84=9A?=
 =?UTF-8?q?=E6=9C=AC=E8=8A=82=E7=82=B9=20-=20=E8=A1=A8=E5=A4=B4=E4=B8=8E?=
 =?UTF-8?q?=E8=A1=8C=E5=8C=BA=E5=85=B1=E4=BA=AB=E5=90=8C=E5=AE=BD=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=20gutter=20=E5=AF=B9=E9=BD=90=E5=88=97?=
 =?UTF-8?q?=E7=BA=BF=20(#173)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: zhaoyue <zhaoyue@rongshantech.com>
---
 web/src/components/canvas/canvas-script-node.tsx | 2 +-
 web/src/styles/globals.css                       | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/src/components/canvas/canvas-script-node.tsx b/web/src/components/canvas/canvas-script-node.tsx
index a7bec814e..5d06f541e 100644
--- a/web/src/components/canvas/canvas-script-node.tsx
+++ b/web/src/components/canvas/canvas-script-node.tsx
@@ -173,7 +173,7 @@ export function CanvasScriptNodeContent({ node, batch, pipeline, scale, mentionR
                 <GenerationBatchDetails batch={batch} rows={rows} onRetryItem={(itemId) => onRetryBatchItem(batch.id, itemId)} onCancelItem={(itemId) => onCancelBatchItem(batch.id, itemId)} />
             </Modal> : null}
             <StoryboardMiniPipeline pipeline={pipeline} theme={theme} rows={rows} />
-            <div className="grid h-9 shrink-0 items-center border-b text-xs font-semibold" style={{ borderColor: theme.node.stroke, color: theme.node.muted, gridTemplateColumns: SCRIPT_GRID_TEMPLATE }}>
+            <div className="storyboard-header-gutter grid h-9 shrink-0 items-center border-b text-xs font-semibold" style={{ borderColor: theme.node.stroke, color: theme.node.muted, gridTemplateColumns: SCRIPT_GRID_TEMPLATE }}>
                 <HeaderCell borderColor={theme.node.stroke} align="center">序号</HeaderCell>
                 <HeaderCell borderColor={theme.node.stroke} align="center">时长</HeaderCell>
                 <HeaderCell borderColor={theme.node.stroke}>画面描述</HeaderCell>
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 37c3858a6..9921798d1 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -4715,6 +4715,15 @@
         scrollbar-width: auto;
     }
 
+    /* 表头与滚动行区共享同宽 scrollbar gutter，保证列线对齐；滚动条本身透明隐藏 */
+    .storyboard-header-gutter {
+        overflow-x: hidden;
+        overflow-y: scroll;
+        scrollbar-color: transparent transparent;
+        scrollbar-gutter: stable;
+        scrollbar-width: auto;
+    }
+
     .storyboard-scrollbar::-webkit-scrollbar {
         width: 12px;
     }