From 8b5328cd65de1e1e4dd9237add2af6f288c0f240 Mon Sep 17 00:00:00 2001
From: Alex Hancock <alex.hancock@example.com>
Date: Tue, 3 Dec 2024 15:38:31 -0500
Subject: [PATCH] [app] Proper line breaks for code blocks

---
 ui/desktop/src/components/MarkdownContent.tsx | 76 ++++++++++++-------
 1 file changed, 48 insertions(+), 28 deletions(-)

diff --git a/ui/desktop/src/components/MarkdownContent.tsx b/ui/desktop/src/components/MarkdownContent.tsx
index 9e1ffdcb3d..20696890c7 100644
--- a/ui/desktop/src/components/MarkdownContent.tsx
+++ b/ui/desktop/src/components/MarkdownContent.tsx
@@ -23,12 +23,12 @@ const CodeBlock = ({ language, children }: { language: string; children: string
   };
 
   return (
-    <div className="relative group">
+    <div className="relative group w-full">
       <button
         onClick={handleCopy}
         className="absolute right-2 bottom-2 p-1.5 rounded-lg bg-gray-700/50 text-gray-300
                  opacity-0 group-hover:opacity-100 transition-opacity duration-200
-                 hover:bg-gray-600/50 hover:text-gray-100"
+                 hover:bg-gray-600/50 hover:text-gray-100 z-10"
         title="Copy code"
       >
         {copied ? (
@@ -37,37 +37,57 @@ const CodeBlock = ({ language, children }: { language: string; children: string
           <Copy className="h-4 w-4" />
         )}
       </button>
-      <SyntaxHighlighter
-        style={oneDark}
-        language={language}
-        PreTag="div"
-      >
-        {children}
-      </SyntaxHighlighter>
+      <div className="w-full overflow-x-auto">
+        <SyntaxHighlighter
+          style={oneDark}
+          language={language}
+          PreTag="div"
+          customStyle={{
+            margin: 0,
+            width: '100%',
+            maxWidth: '100%',
+          }}
+          codeTagProps={{
+            style: {
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all',
+              overflowWrap: 'break-word',
+            }
+          }}
+        >
+          {children}
+        </SyntaxHighlighter>
+      </div>
     </div>
   );
 };
 
 export default function MarkdownContent({ content, className = '' }: MarkdownContentProps) {
   return (
-    <ReactMarkdown
-      className={`prose prose-xs max-w-full break-words prose-pre:whitespace-pre-wrap prose-pre:break-words ${className}`}
-      components={{
-        code({node, inline, className, children, ...props}) {
-          const match = /language-(\w+)/.exec(className || '');
-          return !inline && match ? (
-            <CodeBlock language={match[1]}>
-              {String(children).replace(/\n$/, '')}
-            </CodeBlock>
-          ) : (
-            <code {...props} className={className}>
-              {children}
-            </code>
-          );
-        }
-      }}
-    >
-      {content}
-    </ReactMarkdown>
+    <div className="w-full overflow-x-hidden">
+      <ReactMarkdown
+        className={`prose prose-xs w-full max-w-full break-words
+          prose-pre:p-0 prose-pre:m-0
+          prose-code:break-all prose-code:whitespace-pre-wrap
+          prose-pre:bg-transparent
+          ${className}`}
+        components={{
+          code({node, inline, className, children, ...props}) {
+            const match = /language-(\w+)/.exec(className || '');
+            return !inline && match ? (
+              <CodeBlock language={match[1]}>
+                {String(children).replace(/\n$/, '')}
+              </CodeBlock>
+            ) : (
+              <code {...props} className={`${className} break-all whitespace-pre-wrap`}>
+                {children}
+              </code>
+            );
+          }
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
   );
 }
\ No newline at end of file