From 724a36fcdbe7cc055c32aeae9199158fe8278aed Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 2 Apr 2025 16:28:55 +0800
Subject: [PATCH] Fix: Issue with Markdown Code Blocks Breaking Frontend Layout
 #5789 (#6758)

### What problem does this PR solve?

Fix: Issue with Markdown Code Blocks Breaking Frontend Layout #5789

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/pages/chat/markdown-content/index.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/chat/markdown-content/index.tsx b/web/src/pages/chat/markdown-content/index.tsx
index 0a83fb97d..d1c6c6af6 100644
--- a/web/src/pages/chat/markdown-content/index.tsx
+++ b/web/src/pages/chat/markdown-content/index.tsx
@@ -201,11 +201,16 @@ const MarkdownContent = ({
             const { children, className, node, ...rest } = props;
             const match = /language-(\w+)/.exec(className || '');
             return match ? (
-              <SyntaxHighlighter {...rest} PreTag="div" language={match[1]}>
+              <SyntaxHighlighter
+                {...rest}
+                PreTag="div"
+                language={match[1]}
+                wrapLongLines
+              >
                 {String(children).replace(/\n$/, '')}
               </SyntaxHighlighter>
             ) : (
-              <code {...rest} className={className}>
+              <code {...rest} className={classNames(className, 'text-wrap')}>
                 {children}
               </code>
             );