diff --git a/web/src/app/home/pipelines/debug-dialog/DebugDialog.tsx b/web/src/app/home/pipelines/debug-dialog/DebugDialog.tsx
index 2a4505dc..6e428635 100644
--- a/web/src/app/home/pipelines/debug-dialog/DebugDialog.tsx
+++ b/web/src/app/home/pipelines/debug-dialog/DebugDialog.tsx
@@ -227,7 +227,7 @@ export default function DebugDialog({
 
   const renderMessageContent = (message: Message) => {
     return (
-      <span className="text-base leading-relaxed align-middle">
+      <span className="text-base leading-relaxed align-middle whitespace-pre-wrap">
         {(message.message_chain as MessageComponent[]).map(
           (component, index) => {
             if (component.type === 'At') {