From a2ee2ce732327cdf7d3def9ddd8746c19e48cb92 Mon Sep 17 00:00:00 2001
From: Alex Hancock <alexhancock@block.xyz>
Date: Tue, 26 Nov 2024 23:12:29 -0500
Subject: [PATCH] [app] Layout improvement to correct overflow of markdown
 content

---
 ui/desktop/src/components/GooseMessage.tsx    | 2 +-
 ui/desktop/src/components/ToolInvocations.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/desktop/src/components/GooseMessage.tsx b/ui/desktop/src/components/GooseMessage.tsx
index 8e0a6c46d6..a902fb7077 100644
--- a/ui/desktop/src/components/GooseMessage.tsx
+++ b/ui/desktop/src/components/GooseMessage.tsx
@@ -31,7 +31,7 @@ export default function GooseMessage({ message, metadata, messages, append }: Go
 
         {message.content && (
           <div className="flex bg-goose-bubble text-white rounded-2xl p-4 mb-[16px]">
-            <ReactMarkdown className="prose prose-xs">{message.content}</ReactMarkdown>
+            <ReactMarkdown className="prose prose-xs max-w-full overflow-x-auto break-words prose-pre:whitespace-pre-wrap prose-pre:break-words">{message.content}</ReactMarkdown>
           </div>
         )}
 
diff --git a/ui/desktop/src/components/ToolInvocations.tsx b/ui/desktop/src/components/ToolInvocations.tsx
index e6c94c8aaa..ceecda0092 100644
--- a/ui/desktop/src/components/ToolInvocations.tsx
+++ b/ui/desktop/src/components/ToolInvocations.tsx
@@ -22,7 +22,7 @@ export default function ToolInvocations({ toolInvocations }) {
 
 function ToolInvocation({ toolInvocation }) {
   return (
-    <div className="flex bg-goose-bubble text-white rounded-2xl p-4 pb-0 mb-[16px]">
+    <div className="flex bg-goose-bubble text-white rounded-2xl p-4 pb-0 mb-[16px] max-w-full">
       <div key={toolInvocation.toolCallId} className="w-full h-full flex flex-col text-tool">
         <ToolCall call={toolInvocation} />
         {toolInvocation.state === 'result' && <ToolResult result={toolInvocation} />}
@@ -54,7 +54,7 @@ function ToolCall({ call }: ToolCallProps) {
       </div>
 
       {call.args && (
-        <ReactMarkdown className="p-2">
+        <ReactMarkdown className="p-2 max-w-full overflow-x-auto break-words prose-pre:whitespace-pre-wrap prose-pre:break-words">
           {argsMarkdownContent}
         </ReactMarkdown>
       )}
@@ -140,7 +140,7 @@ function ToolResult({ result }: ToolResultProps) {
               {(isExpanded || !shouldMinimize) && (
                 <>
                   {item.type === 'text' && item.text && (
-                    <ReactMarkdown className="text-tool-result-green whitespace-pre-wrap p-2">
+                    <ReactMarkdown className="text-tool-result-green whitespace-pre-wrap p-2 max-w-full overflow-x-auto break-words prose-pre:whitespace-pre-wrap prose-pre:break-words">
                       {item.text}
                     </ReactMarkdown>
                   )}