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
triggerdotdev · Mar 27, 2024 · db611be · db611be
1 parent 215b60c
commit db611be
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git 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,15 +67,15 @@ 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
       )}
     >
       {accessory.items.map((item, index) => (
         <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/...rgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/...rgs.$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/...app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx b/...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();