fix(wabapp): Fix for wrapping text on run inspector (#3328)

samejr · web-flow · commit 4f2ff3d9def9 · 2026-04-04T11:02:12.000+01:00
### Text wrapping fix - Fixes message text not wrapping on the run inspector if there were no spaces in the text - Fixes inspector title truncation - Adds a copy text button for the Message property <img width="468" height="740" alt="CleanShot 2026-04-04 at 10 19 02@2x" src="https://github.com/user-attachments/assets/71e42bf3-d103-44a2-b3b4-937c0b60a4bc" />
diff --git a/apps/webapp/app/components/primitives/CopyTextLink.tsx b/apps/webapp/app/components/primitives/CopyTextLink.tsx
@@ -0,0 +1,33 @@
+import { ClipboardCheckIcon, ClipboardIcon } from "lucide-react";
+import { useCopy } from "~/hooks/useCopy";
+import { cn } from "~/utils/cn";
+
+type CopyTextLinkProps = {
+  value: string;
+  className?: string;
+};
+
+export function CopyTextLink({ value, className }: CopyTextLinkProps) {
+  const { copy, copied } = useCopy(value);
+
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      className={cn(
+        "inline-flex cursor-pointer items-center gap-1 text-xs transition-colors",
+        copied
+          ? "text-success"
+          : "text-text-dimmed hover:text-text-bright",
+        className
+      )}
+    >
+      {copied ? "Copied" : "Copy"}
+      {copied ? (
+        <ClipboardCheckIcon className="size-3" />
+      ) : (
+        <ClipboardIcon className="size-3" />
+      )}
+    </button>
+  );
+}
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -32,6 +32,7 @@ import { MachineTooltipInfo } from "~/components/MachineTooltipInfo";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { CopyableText } from "~/components/primitives/CopyableText";
+import { CopyTextLink } from "~/components/primitives/CopyTextLink";
 import { DateTime, DateTimeAccurate } from "~/components/primitives/DateTime";
 import { Header2, Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
@@ -263,19 +264,21 @@ function SpanBody({
     span.entity?.type === "prompt";
 
   return (
-    <div className={cn(
-      "grid h-full max-h-full overflow-hidden bg-background-bright",
-      isAiInspector ? "grid-rows-[auto_1fr]" : "grid-rows-[2.5rem_1fr]"
-    )}>
+    <div
+      className={cn(
+        "grid h-full max-h-full overflow-hidden bg-background-bright",
+        isAiInspector ? "grid-rows-[auto_1fr]" : "grid-rows-[2.5rem_1fr]"
+      )}
+    >
       <div className="border-b border-grid-bright px-3 pr-2">
-        <div className="flex h-10 items-center justify-between gap-2 overflow-x-hidden">
-          <div className="flex items-center gap-1 overflow-x-hidden">
+        <div className="grid h-10 grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
+          <div className="flex min-w-0 items-center gap-1">
             <RunIcon
               name={span.style?.icon}
               spanName={span.message}
               className="size-5 min-h-5 min-w-5"
             />
-            <Header2 className={cn("overflow-x-hidden")}>
+            <Header2 className="min-w-0">
               <SpanTitle {...span} size="large" hideAccessory overrideDimmed />
             </Header2>
           </div>
@@ -311,7 +314,6 @@ function formatSpanDuration(nanoseconds: number): string {
   return `${mins}m ${secs}s`;
 }
 
-
 function applySpanOverrides(span: Span, spanOverrides?: SpanOverride): Span {
   if (!spanOverrides) {
     return span;
@@ -1259,8 +1261,13 @@ function SpanEntity({ span }: { span: Span }) {
         )}
         <Property.Table>
           <Property.Item>
-            <Property.Label>Message</Property.Label>
-            <Property.Value className="whitespace-pre-wrap">{span.message}</Property.Value>
+            <Property.Label className="flex items-center justify-between">
+              <span>Message</span>
+              <CopyTextLink value={span.message} />
+            </Property.Label>
+            <Property.Value className="whitespace-pre-wrap [overflow-wrap:break-word]">
+              {span.message}
+            </Property.Value>
           </Property.Item>
         </Property.Table>
         {span.events.length > 0 && <SpanEvents spanEvents={span.events} />}
@@ -1416,7 +1423,13 @@ function SpanEntity({ span }: { span: Span }) {
         <AISpanDetails
           aiData={span.entity.object}
           promptVersionData={span.entity.promptVersionData}
-          rawProperties={typeof span.properties === "string" ? span.properties : span.properties != null ? JSON.stringify(span.properties, null, 2) : undefined}
+          rawProperties={
+            typeof span.properties === "string"
+              ? span.properties
+              : span.properties != null
+              ? JSON.stringify(span.properties, null, 2)
+              : undefined
+          }
           startTime={span.startTime}
           duration={span.duration}
         />
@@ -1456,4 +1469,3 @@ function SpanEntity({ span }: { span: Span }) {
     }
   }
 }
-
