auto-save 2026-05-13 19:56 (~4)

web/components/nodes/index.tsx

@@ -517,10 +517,40 @@ export function KeyframePanelNode({ data }: any) {
   const { getZoom } = useReactFlow()
   const panelRef = useRef<HTMLDivElement>(null)
   const [pinRect, setPinRect] = useState<{ left: number; top: number }>({ left: 24, top: 72 })
-  if (!d.job || d.expandedFrame === null) return null
-  const active = d.job.frames.find((f) => f.index === d.expandedFrame)
   const scale = d.framePanelScale ?? 1
   const pinned = d.framePanelPinned ?? false
+
+  const getStoryboardDockTop = () => {
+    if (typeof window === "undefined") return 64
+    const bar = document.querySelector<HTMLElement>('[data-storyboard-bar="true"]')
+    const bottom = bar?.getBoundingClientRect().bottom ?? 52
+    return Math.max(56, Math.min(window.innerHeight - 120, bottom + 10))
+  }
+
+  useEffect(() => {
+    if (!pinned || typeof window === "undefined") return
+
+    const syncDock = () => {
+      setPinRect({ left: 16, top: getStoryboardDockTop() })
+    }
+
+    syncDock()
+    const bar = document.querySelector<HTMLElement>('[data-storyboard-bar="true"]')
+    let observer: ResizeObserver | null = null
+    if (bar && "ResizeObserver" in window) {
+      observer = new ResizeObserver(syncDock)
+      observer.observe(bar)
+    }
+    window.addEventListener("resize", syncDock)
+
+    return () => {
+      observer?.disconnect()
+      window.removeEventListener("resize", syncDock)
+    }
+  }, [pinned])
+
+  if (!d.job || d.expandedFrame === null) return null
+  const active = d.job.frames.find((f) => f.index === d.expandedFrame)
   const panelWidth = Math.round(760 * scale)
   const panelHeight = Math.round(746 * scale)
   const bodyHeight = Math.max(520, panelHeight - 27)
@@ -533,7 +563,7 @@ export function KeyframePanelNode({ data }: any) {
     if (!pinned) {
       const zoom = getZoom()
       setScale(scale * zoom)
-      setPinRect({ left: 16, top: 64 })
+      setPinRect({ left: 16, top: getStoryboardDockTop() })
     }
     d.onFramePanelPinnedChange?.(!pinned)
   }

web/components/storyboard-bar.tsx

@@ -41,7 +41,7 @@ export function StoryboardBar({ job, selectedFrames, focusedFrame, onFocusFrame
 
 
   return (
-    <div className="relative z-20 flex-shrink-0 border-b border-white/5 bg-black/30 backdrop-blur-xl">
+    <div data-storyboard-bar="true" className="relative z-20 flex-shrink-0 border-b border-white/5 bg-black/30 backdrop-blur-xl">
       {/* header */}
       <div className="flex items-center justify-between px-4 py-2">
         <div className="flex items-center gap-2 min-w-0">