Fix the task run status reason UI

Author: ericallam

apps/webapp/app/components/runs/v3/TaskRunStatus.tsx

@@ -93,20 +93,17 @@ export function descriptionForTaskRunStatus(status: TaskRunStatus): string {
 
 export function TaskRunStatusCombo({
   status,
-  statusReason,
   className,
   iconClassName,
 }: {
   status: TaskRunStatus;
-  statusReason?: string;
   className?: string;
   iconClassName?: string;
 }) {
   return (
     <span className={cn("flex items-center gap-1", className)}>
       <TaskRunStatusIcon status={status} className={cn("h-4 w-4", iconClassName)} />
       <TaskRunStatusLabel status={status} />
-      <TaskRunStatusReason status={status} statusReason={statusReason} />
     </span>
   );
 }
@@ -120,7 +117,7 @@ const statusReasonsToDescription: Record<string, string> = {
   BACKGROUND_WORKER_MISMATCH: "Background worker mismatch",
 };
 
-function TaskRunStatusReason({
+export function TaskRunStatusReason({
   status,
   statusReason,
 }: {
@@ -142,7 +139,7 @@ function TaskRunStatusReason({
   }
 
   return (
-    <Callout to="https://trigger.dev/docs" variant="warning" className="w-fit text-sm">
+    <Callout to="https://trigger.dev/docs" variant="warning" className="text-sm">
       {description}
     </Callout>
   );

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx

@@ -47,7 +47,7 @@ import { RunTag } from "~/components/runs/v3/RunTag";
 import { SpanEvents } from "~/components/runs/v3/SpanEvents";
 import { SpanTitle } from "~/components/runs/v3/SpanTitle";
 import { TaskRunAttemptStatusCombo } from "~/components/runs/v3/TaskRunAttemptStatus";
-import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus";
+import { TaskRunStatusCombo, TaskRunStatusReason } from "~/components/runs/v3/TaskRunStatus";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useSearchParams } from "~/hooks/useSearchParam";
@@ -402,7 +402,7 @@ function RunBody({
                 <Property.Item>
                   <Property.Label>Status</Property.Label>
                   <Property.Value>
-                    <TaskRunStatusCombo status={run.status} statusReason={run.statusReason} />
+                    <TaskRunStatusCombo status={run.status} />
                   </Property.Value>
                 </Property.Item>
                 <Property.Item>
@@ -712,12 +712,9 @@ function RunBody({
             </div>
           ) : (
             <div className="flex flex-col gap-4 pt-3">
-              <div className="border-b border-grid-bright pb-3">
-                <TaskRunStatusCombo
-                  status={run.status}
-                  statusReason={run.statusReason}
-                  className="text-sm"
-                />
+              <div className="space-y-2 border-b border-grid-bright pb-3">
+                <TaskRunStatusCombo status={run.status} className="text-sm" />
+                <TaskRunStatusReason status={run.status} statusReason={run.statusReason} />
               </div>
               <RunTimeline run={run} />