From 950b45c5ee6989b3d8cc882190d8bab380a8e505 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 16 Jul 2026 18:50:46 -0400
Subject: [PATCH 1/3] cool

---
 .../components/split-pane.tsx                 | 20 ++++--
 .../components/trace-shortcut-helper.tsx      |  2 +-
 .../new-trace-viewer/trace-viewer.tsx         | 62 ++++++++++---------
 3 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
index 24df7f84cf..9bdc4fb528 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
+++ b/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 < 2 || parts.length > 3) {
+    throw new Error('SplitPane expects two or 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,18 @@ export function SplitPane({
         </div>
         {end}
       </div>
+      {endOverlay ? (
+        <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>
+      ) : null}
     </div>
   );
 }
diff --git a/packages/web-shared/src/components/new-trace-viewer/components/trace-shortcut-helper.tsx b/packages/web-shared/src/components/new-trace-viewer/components/trace-shortcut-helper.tsx
index 84eee9c7d5..e346929bf3 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/trace-shortcut-helper.tsx
+++ b/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"
diff --git a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx b/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
index 35437939bf..f57c63fa42 100644
--- a/packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx
+++ b/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

From 1bae06df81ab2b626c244d8f9c2d9665fc2eb609 Mon Sep 17 00:00:00 2001
From: mitul-s <mitulxshah@gmail.com>
Date: Thu, 16 Jul 2026 18:53:00 -0400
Subject: [PATCH 2/3] Update split-pane.tsx

---
 .../components/split-pane.tsx                 | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
index 9bdc4fb528..016eb30459 100644
--- a/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
+++ b/packages/web-shared/src/components/new-trace-viewer/components/split-pane.tsx
@@ -36,8 +36,8 @@ export function SplitPane({
   scrollContainerRef,
 }: SplitPaneProps) {
   const parts = Children.toArray(children);
-  if (parts.length < 2 || parts.length > 3) {
-    throw new Error('SplitPane expects two or three children');
+  if (parts.length !== 3) {
+    throw new Error('SplitPane expects exactly three children');
   }
   const [start, end, endOverlay] = parts;
 
@@ -126,18 +126,16 @@ export function SplitPane({
         </div>
         {end}
       </div>
-      {endOverlay ? (
-        <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
+        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>
-      ) : null}
+      </div>
     </div>
   );
 }

From cd2efa37f1a00238ef4ff65cd00aace6f4b5f81e Mon Sep 17 00:00:00 2001
From: Mitul Shah <mitulxshah@gmail.com>
Date: Thu, 16 Jul 2026 18:54:16 -0400
Subject: [PATCH 3/3] Create fruity-cars-slide.md

Signed-off-by: Mitul Shah <mitulxshah@gmail.com>
---
 .changeset/fruity-cars-slide.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fruity-cars-slide.md

diff --git a/.changeset/fruity-cars-slide.md b/.changeset/fruity-cars-slide.md
new file mode 100644
index 0000000000..5b1b0e1b08
--- /dev/null
+++ b/.changeset/fruity-cars-slide.md
@@ -0,0 +1,5 @@
+---
+"@workflow/web-shared": patch
+---
+
+Adjust helper position on trace viewer