auto-save 2026-05-13 19:39 (~3)

web/components/nodes/index.tsx

@@ -517,6 +517,7 @@ 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 })
+  const [pinScreenScale, setPinScreenScale] = useState(1)
   if (!d.job || d.expandedFrame === null) return null
   const active = d.job.frames.find((f) => f.index === d.expandedFrame)
   const scale = d.framePanelScale ?? 1
@@ -533,6 +534,7 @@ export function KeyframePanelNode({ data }: any) {
     if (!pinned) {
       const rect = panelRef.current?.getBoundingClientRect()
       if (rect) {
+        setPinScreenScale(rect.width > 0 ? rect.width / panelWidth : 1)
         setPinRect({
           left: Math.max(12, Math.min(window.innerWidth - Math.min(rect.width, window.innerWidth - 24), rect.left)),
           top: Math.max(12, Math.min(window.innerHeight - 80, rect.top)),
@@ -548,7 +550,7 @@ export function KeyframePanelNode({ data }: any) {
     const startX = e.clientX
     const startY = e.clientY
     const startScale = scale
-    const zoom = pinned ? 1 : getZoom()
+    const zoom = pinned ? pinScreenScale : getZoom()
     const onMove = (ev: PointerEvent) => {
       const dx = (ev.clientX - startX) / zoom
       const dy = (ev.clientY - startY) / zoom
@@ -656,7 +658,12 @@ export function KeyframePanelNode({ data }: any) {
     return createPortal(
       <div
         className="fixed z-[240]"
-        style={{ left: pinRect.left, top: pinRect.top }}
+        style={{
+          left: pinRect.left,
+          top: pinRect.top,
+          transform: `scale(${pinScreenScale})`,
+          transformOrigin: "top left",
+        }}
       >
         {panel}
       </div>,