From db611bebba323636b9f3ae09e5e8ce045b26ae28 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 27 Mar 2024 12:16:20 +0000
Subject: [PATCH] Text truncation fixes (#973)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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    | 13 +++++++------
 .../route.tsx                                       |  4 ++--
 .../route.tsx                                       |  5 ++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/SpanTitle.tsx b/apps/webapp/app/components/runs/v3/SpanTitle.tsx
index 520b8487c..e3ed0d5bc 100644
--- a/apps/webapp/app/components/runs/v3/SpanTitle.tsx
+++ b/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"
             )}
           >
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
index c369697cc..c6133807a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/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>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx
index 4e82c0d4c..3ca6f7070 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx
+++ b/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();