From 43b96b817876daf4672d4ed02e98819bff98d483 Mon Sep 17 00:00:00 2001
From: kang <wankang2050@gmail.com>
Date: Wed, 13 May 2026 14:05:14 +0800
Subject: [PATCH] auto-save 2026-05-13 14:05 (~2)

---
 .memory/worklog.json              |  7 ++++
 web/components/storyboard-bar.tsx | 67 +++++++++++++++++--------------
 2 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/.memory/worklog.json b/.memory/worklog.json
index 7c43741..7f0490b 100644
--- a/.memory/worklog.json
+++ b/.memory/worklog.json
@@ -1622,6 +1622,13 @@
       "type": "session-heartbeat",
       "message": "Claude 会话活跃 · 最近命令：claude · 2 项未提交变更 · 最近提交：auto-save 2026-05-13 13:53 (+1, ~4)",
       "files_changed": 2
+    },
+    {
+      "ts": "2026-05-13T13:59:41+08:00",
+      "type": "commit",
+      "message": "auto-save 2026-05-13 13:59 (~2)",
+      "hash": "c026ab5",
+      "files_changed": 2
     }
   ]
 }
diff --git a/web/components/storyboard-bar.tsx b/web/components/storyboard-bar.tsx
index fb29f74..6fd0e23 100644
--- a/web/components/storyboard-bar.tsx
+++ b/web/components/storyboard-bar.tsx
@@ -110,37 +110,44 @@ export function StoryboardBar({ job, selectedFrames, onOpenStoryboard }: Props)
         )
       )}
 
-      {/* Hover 大图预览 · portal 到 body 避免父容器 overflow clip */}
-      {mounted && hover && createPortal(
-        <div
-          className="fixed z-[120] pointer-events-none"
-          style={{
-            top: hover.rect.bottom + 8,
-            left: Math.max(12, Math.min(window.innerWidth - 380, hover.rect.left + hover.rect.width / 2 - 180)),
-            animation: "drawer-in 0.18s cubic-bezier(0.32, 0.72, 0, 1)",
-          }}
-        >
-          <div className="rounded-2xl overflow-hidden border border-white/25 bg-black" style={{ boxShadow: "0 30px 80px -10px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06)" }}>
-            <img
-              src={effectiveFrameUrl(job.id, hover.frame)}
-              alt={`preview ${hover.frame.index}`}
-              className="block"
-              style={{
-                width: 360,
-                maxWidth: "min(560px, 70vw)",
-                height: "auto",
-                maxHeight: "70vh",
-                objectFit: "contain",
-              }}
-            />
-            <div className="flex items-center justify-between px-3 py-2 bg-black/70 backdrop-blur-md">
-              <span className="text-white text-[12.5px] font-medium">分镜 {hover.seq} · {hover.frame.timestamp.toFixed(2)}s</span>
-              <span className="text-white/60 text-[11px] font-mono">点击进入精细调整</span>
+      {/* Hover 大图预览 · portal 到 body 避免父容器 overflow clip · 跟关键帧节点 hover 同尺寸 */}
+      {mounted && hover && (() => {
+        // 预览宽度按视口动态算，最大 720（跟 KEYFRAME hover 一致）
+        const previewMaxWidth = Math.min(720, window.innerWidth * 0.8)
+        const halfW = previewMaxWidth / 2
+        const centerX = hover.rect.left + hover.rect.width / 2
+        const clampedLeft = Math.max(12, Math.min(window.innerWidth - previewMaxWidth - 12, centerX - halfW))
+        return createPortal(
+          <div
+            className="fixed z-[120] pointer-events-none"
+            style={{
+              top: hover.rect.bottom + 8,
+              left: clampedLeft,
+              animation: "drawer-in 0.18s cubic-bezier(0.32, 0.72, 0, 1)",
+            }}
+          >
+            <div className="rounded-2xl overflow-hidden border border-white/25 bg-black" style={{ boxShadow: "0 40px 100px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06)" }}>
+              <img
+                src={effectiveFrameUrl(job.id, hover.frame)}
+                alt={`preview ${hover.frame.index}`}
+                className="block"
+                style={{
+                  width: 720,
+                  maxWidth: "min(720px, 80vw)",
+                  height: "auto",
+                  maxHeight: "82vh",
+                  objectFit: "contain",
+                }}
+              />
+              <div className="flex items-center justify-between px-3 py-2 bg-black/70 backdrop-blur-md">
+                <span className="text-white text-[12.5px] font-medium">分镜 {hover.seq} · {hover.frame.timestamp.toFixed(2)}s</span>
+                <span className="text-white/60 text-[11px] font-mono">点击进入精细调整</span>
+              </div>
             </div>
-          </div>
-        </div>,
-        document.body,
-      )}
+          </div>,
+          document.body,
+        )
+      })()}
     </div>
   )
 }