From 2623c65321a224942055ae99367dbcdaed096f7b Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Sat, 28 Feb 2026 19:01:47 +0700
Subject: [PATCH] fix: Improve text wrapping in trace and span previews by
 changing `break-words` to `break-all`.

---
 ui/web/src/pages/traces/trace-detail-dialog.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/web/src/pages/traces/trace-detail-dialog.tsx b/ui/web/src/pages/traces/trace-detail-dialog.tsx
index b502532f..b48b65d1 100644
--- a/ui/web/src/pages/traces/trace-detail-dialog.tsx
+++ b/ui/web/src/pages/traces/trace-detail-dialog.tsx
@@ -132,14 +132,14 @@ export function TraceDetailDialog({ traceId, onClose, getTrace, onNavigateTrace
             {trace.input_preview && (
               <div className="rounded-md border p-3">
                 <p className="mb-1 text-xs font-medium text-muted-foreground">Input</p>
-                <pre className="max-h-[40vh] overflow-y-auto whitespace-pre-wrap break-words text-sm">{trace.input_preview}</pre>
+                <pre className="max-h-[40vh] overflow-y-auto whitespace-pre-wrap break-all text-sm">{trace.input_preview}</pre>
               </div>
             )}
 
             {trace.output_preview && (
               <div className="rounded-md border p-3">
                 <p className="mb-1 text-xs font-medium text-muted-foreground">Output</p>
-                <pre className="max-h-[40vh] overflow-y-auto whitespace-pre-wrap break-words text-sm">{trace.output_preview}</pre>
+                <pre className="max-h-[40vh] overflow-y-auto whitespace-pre-wrap break-all text-sm">{trace.output_preview}</pre>
               </div>
             )}
 
@@ -265,7 +265,7 @@ function SpanTreeNode({ node, depth }: { node: SpanNode; depth: number }) {
             {span.input_preview && (
               <div>
                 <p className="text-xs text-muted-foreground">Input:</p>
-                <pre className="mt-1 max-h-[40vh] overflow-y-auto break-words whitespace-pre-wrap rounded bg-muted/50 p-2 text-xs">
+                <pre className="mt-1 max-h-[40vh] overflow-y-auto break-all whitespace-pre-wrap rounded bg-muted/50 p-2 text-xs">
                   {span.input_preview}
                 </pre>
               </div>
@@ -273,7 +273,7 @@ function SpanTreeNode({ node, depth }: { node: SpanNode; depth: number }) {
             {span.output_preview && (
               <div>
                 <p className="text-xs text-muted-foreground">Output:</p>
-                <pre className="mt-1 max-h-[40vh] overflow-y-auto break-words whitespace-pre-wrap rounded bg-muted/50 p-2 text-xs">
+                <pre className="mt-1 max-h-[40vh] overflow-y-auto break-all whitespace-pre-wrap rounded bg-muted/50 p-2 text-xs">
                   {span.output_preview}
                 </pre>
               </div>