Adjust helper position on trace viewer

.changeset/fruity-cars-slide.md

@@ -0,0 +1,5 @@
+---
+"@workflow/web-shared": patch
+---
+
+Adjust helper position on trace viewer

packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx

@@ -36,10 +36,10 @@ export function SplitPane({
   scrollContainerRef,
 }: SplitPaneProps) {
   const parts = Children.toArray(children);
-  if (parts.length !== 2) {
-    throw new Error('SplitPane expects exactly two children');
+  if (parts.length !== 3) {
+    throw new Error('SplitPane expects exactly three children');
   }
-  const [start, end] = parts;
+  const [start, end, endOverlay] = parts;
 
   const [startPx, setStartPx] = useState(DEFAULT_START_PX);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -85,7 +85,7 @@ export function SplitPane({
   );
 
   return (
-    <div className={cn('flex flex-col h-full min-h-0', className)}>
+    <div className={cn('relative flex flex-col h-full min-h-0', className)}>
       <div
         className="shrink-0 grid"
         style={{ gridTemplateColumns: colTemplate }}
@@ -126,6 +126,16 @@ export function SplitPane({
         </div>
         {end}
       </div>
+      <div
+        className="pointer-events-none absolute inset-x-0 bottom-3 z-[5] grid"
+        style={{ gridTemplateColumns: colTemplate }}
+      >
+        <div />
+        <div />
+        <div className="flex min-w-0 items-center justify-between gap-3 pl-4 pr-3">
+          {endOverlay}
+        </div>
+      </div>
     </div>
   );
 }

packages/web-shared/src/components/new-trace-viewer/components/trace-shortcut-helper.tsx

@@ -86,7 +86,7 @@ export function TraceShortcutHelper({
   };
 
   return (
-    <div className="group sticky bottom-3 z-10 ml-4 mb-3 hidden h-8 w-fit items-center gap-1 text-xs leading-none text-gray-900 @min-[480px]:flex">
+    <div className="group pointer-events-auto hidden h-8 w-fit items-center gap-1 text-xs leading-none text-gray-900 @min-[480px]:flex">
       <span
         aria-live="polite"
         aria-atomic="true"

packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx

@@ -495,7 +495,7 @@ function NewTraceViewerContent({
     >
       <div
         id="trace-parent"
-        className="flex-1 min-w-0 grid grid-rows-[auto_1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
+        className="@container flex-1 min-w-0 grid grid-rows-[auto_1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
       >
         <Minimap
           spans={trace.spans}
@@ -582,40 +582,42 @@ function NewTraceViewerContent({
               hoverFraction={hoverFraction}
               altHeld={altHeld}
             />
+          </div>
+          <>
             <TraceShortcutHelper
               hasMultipleSpans={trace.spans.length > 1}
               reducedMotion={reducedMotion}
             />
-          </div>
+            <div className="pointer-events-auto flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400">
+              <IconButton
+                variant="muted"
+                size="small"
+                onClick={zoomOut}
+                disabled={isAtMinZoom}
+                aria-label="Zoom out"
+              >
+                <ZoomOut className="w-4 h-4" />
+              </IconButton>
+              <IconButton
+                variant="muted"
+                size="small"
+                onClick={resetZoom}
+                aria-label="Reset zoom"
+              >
+                <RotateCcw className="w-3.5 h-3.5" />
+              </IconButton>
+              <IconButton
+                variant="muted"
+                size="small"
+                onClick={zoomIn}
+                disabled={isAtMaxZoom}
+                aria-label="Zoom in"
+              >
+                <ZoomIn className="w-4 h-4" />
+              </IconButton>
+            </div>
+          </>
         </SplitPane>
-        <div className="absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-md bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400">
-          <IconButton
-            variant="muted"
-            size="small"
-            onClick={zoomOut}
-            disabled={isAtMinZoom}
-            aria-label="Zoom out"
-          >
-            <ZoomOut className="w-4 h-4" />
-          </IconButton>
-          <IconButton
-            variant="muted"
-            size="small"
-            onClick={resetZoom}
-            aria-label="Reset zoom"
-          >
-            <RotateCcw className="w-3.5 h-3.5" />
-          </IconButton>
-          <IconButton
-            variant="muted"
-            size="small"
-            onClick={zoomIn}
-            disabled={isAtMaxZoom}
-            aria-label="Zoom in"
-          >
-            <ZoomIn className="w-4 h-4" />
-          </IconButton>
-        </div>
       </div>
 
       <TraceDetailPanel