auto-save 2026-05-13 14:05 (~2)

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