From bb54e978063cafc044290e795acc489133946de0 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Mon, 4 Aug 2025 13:21:30 +0100
Subject: [PATCH] Show text wrapping on code blocks (#2338)

* Show text wrapping on deployment code blocks

* Show textWrapping on some more CodeBlocks

* Adds missing margins to the error block
---
 apps/webapp/app/components/runs/v3/DeploymentError.tsx        | 4 +++-
 apps/webapp/app/components/runs/v3/PacketDisplay.tsx          | 1 +
 .../route.tsx                                                 | 4 ++--
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/DeploymentError.tsx b/apps/webapp/app/components/runs/v3/DeploymentError.tsx
index 517f91789..11ee62dfa 100644
--- a/apps/webapp/app/components/runs/v3/DeploymentError.tsx
+++ b/apps/webapp/app/components/runs/v3/DeploymentError.tsx
@@ -9,7 +9,7 @@ type DeploymentErrorProps = {
 
 export function DeploymentError({ errorData }: DeploymentErrorProps) {
   return (
-    <div className="flex flex-col gap-2 rounded-sm border border-rose-500/50 p-3">
+    <div className="mx-3 mb-3 flex flex-col gap-2 rounded-sm border border-rose-500/50 p-3">
       <DeploymentErrorHeader title={errorData.name ?? "Error"} titleClassName="text-rose-500" />
       {errorData.message && <Callout variant="error">{errorData.message}</Callout>}
       {errorData.stack && (
@@ -18,6 +18,7 @@ export function DeploymentError({ errorData }: DeploymentErrorProps) {
           showLineNumbers={false}
           code={errorData.stack}
           maxLines={20}
+          showTextWrapping
         />
       )}
       {errorData.stderr && (
@@ -28,6 +29,7 @@ export function DeploymentError({ errorData }: DeploymentErrorProps) {
             showLineNumbers={false}
             code={errorData.stderr}
             maxLines={20}
+            showTextWrapping
           />
         </>
       )}
diff --git a/apps/webapp/app/components/runs/v3/PacketDisplay.tsx b/apps/webapp/app/components/runs/v3/PacketDisplay.tsx
index 8e30b2df7..24a9b66b6 100644
--- a/apps/webapp/app/components/runs/v3/PacketDisplay.tsx
+++ b/apps/webapp/app/components/runs/v3/PacketDisplay.tsx
@@ -50,6 +50,7 @@ export function PacketDisplay({
           code={data}
           maxLines={20}
           showLineNumbers={false}
+          showTextWrapping
         />
       );
     }
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
index 846f2567b..1559b2c29 100644
--- 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
@@ -758,12 +758,12 @@ function RunBody({
             </div>
           ) : tab === "context" ? (
             <div className="flex flex-col gap-4 py-3">
-              <CodeBlock code={run.context} showLineNumbers={false} />
+              <CodeBlock code={run.context} showLineNumbers={false} showTextWrapping />
             </div>
           ) : tab === "metadata" ? (
             <div className="flex flex-col gap-4 py-3">
               {run.metadata ? (
-                <CodeBlock code={run.metadata} showLineNumbers={false} />
+                <CodeBlock code={run.metadata} showLineNumbers={false} showTextWrapping />
               ) : (
                 <Callout to="https://trigger.dev/docs/runs/metadata" variant="docs">
                   No metadata set for this run. View our metadata documentation to learn more.