feat(ui): refine trajectory inspection details

packages/client/ui-primitives/src/JsonTree.module.css

@@ -13,7 +13,8 @@
   color: var(--dsw-alias-label-primary);
   background: var(--dsw-alias-bg-layer-1);
   font: 12px/16px var(--ds-font-family-code);
-  overscroll-behavior: contain;
+  overscroll-behavior-x: contain;
+  overscroll-behavior-y: auto;
 }
 
 :global(body[data-ds-dark-theme]) .root {
@@ -78,8 +79,8 @@
   position: absolute;
   z-index: 0;
   top: 0;
-  right: -100vw;
-  left: -100vw;
+  right: 0;
+  left: 0;
   height: 16px;
   background: var(--json-tree-hover);
   content: '';
@@ -134,7 +135,7 @@
 }
 
 .copyAnchor {
-  position: absolute;
+  position: fixed;
   z-index: 3;
   display: inline-flex;
 }

packages/client/ui-primitives/src/JsonTree.tsx

@@ -235,14 +235,29 @@ export function JsonTree({
     const rootRect = root.getBoundingClientRect()
     const rowRect = row.getBoundingClientRect()
     setCopyTarget({
-      left: root.scrollLeft + root.clientWidth - 26,
+      left: rootRect.left + root.clientWidth - 26,
       path: target.path,
       side: rowRect.top - rootRect.top > root.clientHeight / 2 ? 'top' : 'bottom',
-      top: root.scrollTop + rowRect.top - rootRect.top,
+      top: rowRect.top,
       value: target.value,
     })
   }
 
+  useEffect(() => {
+    const reposition = () => {
+      const row = activeRowRef.current
+      if (row === undefined) return
+      const resolved = resolveRow(data, row, expandTopLevel)
+      if (resolved !== undefined) positionCopyButton(row, resolved)
+    }
+    window.addEventListener('scroll', reposition, true)
+    window.addEventListener('resize', reposition)
+    return () => {
+      window.removeEventListener('scroll', reposition, true)
+      window.removeEventListener('resize', reposition)
+    }
+  }, [data, expandTopLevel])
+
   const clearCopyTarget = () => {
     setActiveRow(undefined)
     setCopyTarget(undefined)