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

Author: samejr

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
           />
         </>
       )}

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

@@ -50,6 +50,7 @@ export function PacketDisplay({
           code={data}
           maxLines={20}
           showLineNumbers={false}
+          showTextWrapping
         />
       );
     }

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.