From 12ee2bf9b0fd027e6b2e70ccdd35cb10120baa1e Mon Sep 17 00:00:00 2001
From: Jonathan Dobson <jon.m.dobson@gmail.com>
Date: Fri, 1 Aug 2025 14:33:54 -0400
Subject: [PATCH] fix badge alignment (#3088)

---
 skyvern-frontend/src/components/StatusBadge.tsx       | 5 +++--
 skyvern-frontend/src/routes/workflows/WorkflowRun.tsx | 7 +++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/skyvern-frontend/src/components/StatusBadge.tsx b/skyvern-frontend/src/components/StatusBadge.tsx
index 59ad1982..8d284487 100644
--- a/skyvern-frontend/src/components/StatusBadge.tsx
+++ b/skyvern-frontend/src/components/StatusBadge.tsx
@@ -3,15 +3,16 @@ import { Badge } from "./ui/badge";
 import { cn } from "@/util/utils";
 
 type Props = {
+  className?: string;
   status: Status;
 };
 
-function StatusBadge({ status }: Props) {
+function StatusBadge({ className, status }: Props) {
   const statusText = status === "timed_out" ? "timed out" : status;
 
   return (
     <Badge
-      className={cn("flex h-7 w-24 justify-center", {
+      className={cn("flex h-7 w-24 justify-center", className, {
         "bg-green-900 text-green-50 hover:bg-green-900/80":
           status === Status.Completed,
         "bg-orange-900 text-orange-50 hover:bg-orange-900/80":
diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
index afb64fcc..aa020515 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
@@ -190,12 +190,15 @@ function WorkflowRun() {
       {!isEmbedded && (
         <header className="flex justify-between">
           <div className="space-y-3">
-            <div className="flex items-center gap-5">
+            <div className="mr-2 flex items-start gap-5">
               {title}
               {workflowRunIsLoading ? (
                 <Skeleton className="h-8 w-28" />
               ) : workflowRun ? (
-                <StatusBadge status={workflowRun?.status} />
+                <StatusBadge
+                  className="mt-[0.27rem]"
+                  status={workflowRun?.status}
+                />
               ) : null}
             </div>
             <h2 className="text-2xl text-slate-400">{workflowRunId}</h2>