From 435448215ba2f189037919a2b2e5ff40e4d11ab1 Mon Sep 17 00:00:00 2001
From: Tom Dale <tom.dale@vercel.com>
Date: Fri, 15 May 2026 15:23:36 -0400
Subject: [PATCH] fix(web-shared): type trace viewer duration utility

Use Tailwind's typed arbitrary duration syntax for trace viewer zoom controls so Tailwind v3 consumers do not emit ambiguous utility warnings when scanning the package.
---
 .changeset/quiet-trace-viewer-duration.md                   | 5 +++++
 .../src/components/new-trace-viewer/trace-viewer.tsx        | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/quiet-trace-viewer-duration.md

diff --git a/.changeset/quiet-trace-viewer-duration.md b/.changeset/quiet-trace-viewer-duration.md
new file mode 100644
index 0000000000..0a9588efeb
--- /dev/null
+++ b/.changeset/quiet-trace-viewer-duration.md
@@ -0,0 +1,5 @@
+---
+'@workflow/web-shared': patch
+---
+
+Use a typed Tailwind duration utility in the trace viewer controls.
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 b1686c76a2..8b63e32d0c 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
@@ -543,7 +543,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
         <div className="absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-lg bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400">
           <button
             type="button"
-            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
             onClick={zoomOut}
             aria-label="Zoom out"
           >
@@ -551,7 +551,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
           </button>
           <button
             type="button"
-            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
             onClick={resetZoom}
             aria-label="Reset zoom"
           >
@@ -559,7 +559,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
           </button>
           <button
             type="button"
-            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
+            className="flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[time:120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100"
             onClick={zoomIn}
             aria-label="Zoom in"
           >