fix(canvas): 分镜脚本节点 - 表头与行区共享同宽滚动条 gutter 对齐列线 (#173)

Co-authored-by: zhaoyue <zhaoyue@rongshantech.com>

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>

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;
     }