fix(webapp): Only show bright title text on the right hand inspector titles (#3276)

Only makes the span title text brighter when it's shown in the right
hand side inspector (in the spans list it stays dimmed)

Author: samejr

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

@@ -1,5 +1,5 @@
 import { ChevronRightIcon } from "@heroicons/react/20/solid";
-import { type TaskEventStyle } from "@trigger.dev/core/v3";
+import { TaskEventStyle } from "@trigger.dev/core/v3";
 import type { TaskEventLevel } from "@trigger.dev/database";
 import { Fragment } from "react";
 import { cn } from "~/utils/cn";
@@ -14,12 +14,17 @@ type SpanTitleProps = {
   isPartial: boolean;
   size: "small" | "large";
   hideAccessory?: boolean;
+  overrideDimmed?: boolean;
 };
 
 export function SpanTitle(event: SpanTitleProps) {
+  const textClass = eventTextClassName(event);
+  const finalTextClass =
+    event.overrideDimmed && textClass === "text-text-dimmed" ? "text-text-bright" : textClass;
+
   return (
-    <span className={cn("flex items-center gap-x-2 overflow-x-hidden", eventTextClassName(event))}>
-      <span className="truncate text-text-bright">{event.message}</span>{" "}
+    <span className={cn("flex items-center gap-x-2 overflow-x-hidden", finalTextClass)}>
+      <span className="truncate">{event.message}</span>{" "}
       {!event.hideAccessory && (
         <SpanAccessory accessory={event.style.accessory} size={event.size} />
       )}

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

@@ -276,7 +276,7 @@ function SpanBody({
               className="size-5 min-h-5 min-w-5"
             />
             <Header2 className={cn("overflow-x-hidden")}>
-              <SpanTitle {...span} size="large" hideAccessory />
+              <SpanTitle {...span} size="large" hideAccessory overrideDimmed />
             </Header2>
           </div>
           {runParam && closePanel && (