fix badge alignment (#3088)

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":

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>