Text truncation fixes (#973)

* Span titles and code blocks truncate when window is small

* Tree view toggle arrow doesn’t have red hover state if row is an error

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

@@ -16,9 +16,10 @@ type SpanTitleProps = {
 
 export function SpanTitle(event: SpanTitleProps) {
   return (
-    <span className={cn("inline-flex items-center gap-2", eventTextClassName(event))}>
-      {event.message} <SpanAccessory accessory={event.style.accessory} size={event.size} />
-    </span>
+    <div className={cn("flex items-center gap-x-2 overflow-x-hidden", eventTextClassName(event))}>
+      <span className="truncate">{event.message}</span>{" "}
+      <SpanAccessory accessory={event.style.accessory} size={event.size} />
+    </div>
   );
 }
 
@@ -38,7 +39,7 @@ function SpanAccessory({
       return (
         <SpanCodePathAccessory
           accessory={accessory}
-          className={cn(size === "large" ? "text-sm" : "text-xs")}
+          className={cn("overflow-x-hidden", size === "large" ? "text-sm" : "text-xs")}
         />
       );
     }
@@ -66,7 +67,7 @@ export function SpanCodePathAccessory({
   return (
     <code
       className={cn(
-        "inline-flex items-center gap-0.5 rounded border border-charcoal-700 bg-charcoal-800 px-1.5 py-0.5 font-mono text-text-dimmed",
+        "inline-flex items-center gap-0.5 truncate rounded border border-charcoal-700 bg-charcoal-800 px-1.5 py-0.5 font-mono text-text-dimmed",
         className
       )}
     >
@@ -74,7 +75,7 @@ export function SpanCodePathAccessory({
         <Fragment key={index}>
           <span
             className={cn(
-              "inline-flex items-center",
+              "truncate",
               index === accessory.items.length - 1 ? "text-sun-100" : "text-text-dimmed"
             )}
           >

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx

@@ -57,14 +57,14 @@ export default function Page() {
         event.showActionBar ? "grid-rows-[2.5rem_1fr_2.5rem]" : "grid-rows-[2.5rem_1fr]"
       )}
     >
-      <div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
+      <div className="mx-3 flex items-center justify-between gap-2 overflow-x-hidden border-b border-grid-dimmed">
         <div className="flex items-center gap-1 overflow-x-hidden">
           <RunIcon
             name={event.style?.icon}
             spanName={event.message}
             className="h-4 min-h-4 w-4 min-w-4"
           />
-          <Header2 className={cn("whitespace-nowrap")}>
+          <Header2 className={cn("overflow-x-hidden")}>
             <SpanTitle {...event} size="large" />
           </Header2>
         </div>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx

@@ -319,7 +319,7 @@ function TasksTreeView({
               renderNode={({ node, state }) => (
                 <div
                   className={cn(
-                    "flex h-8 cursor-pointer items-center rounded-l-sm pr-2",
+                    "flex h-8 cursor-pointer items-center overflow-hidden rounded-l-sm pr-2",
                     state.selected
                       ? "bg-grid-dimmed hover:bg-grid-bright"
                       : "bg-transparent hover:bg-grid-dimmed"
@@ -339,8 +339,7 @@ function TasksTreeView({
                     <div
                       className={cn(
                         "flex h-8 w-4 items-center",
-                        node.hasChildren &&
-                          (node.data.isError ? "hover:bg-rose-500/30" : "hover:bg-charcoal-800")
+                        node.hasChildren && "hover:bg-charcoal-600"
                       )}
                       onClick={(e) => {
                         e.stopPropagation();