From f58e2fe3331b158fa37b3191a6e46be76b50b52b Mon Sep 17 00:00:00 2001
From: Rankin Zheng <runjin@merico.dev>
Date: Thu, 6 Jul 2023 06:12:55 +0800
Subject: [PATCH] Improve text formatting in CodeBlock component

- Imported Container from "@mantine/core" for better layout control in CodeBlock.
- Wrapped the preformatted text in a Container to apply additional styles.
- Added 'whiteSpace: 'pre-wrap'' and 'wordBreak: 'break-word'' to preserve white spaces, line breaks and ensure long words do not overflow the container.
---
 src/views/CodeBlock.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/views/CodeBlock.tsx b/src/views/CodeBlock.tsx
index b495597..ea3da49 100644
--- a/src/views/CodeBlock.tsx
+++ b/src/views/CodeBlock.tsx
@@ -1,4 +1,4 @@
-import { Tooltip, ActionIcon, CopyButton, Flex } from "@mantine/core";
+import { Tooltip, ActionIcon, CopyButton, Flex, Container } from "@mantine/core";
 import { IconCheck, IconGitCommit, IconFileDiff, IconColumnInsertRight, IconReplace, IconCopy } from "@tabler/icons-react";
 import React, { useState } from "react";
 import ReactMarkdown from "react-markdown";
@@ -147,7 +147,17 @@ const CodeBlock = (props: any) => {
             >
                 {messageText}
             </ReactMarkdown >
-            : <pre>{messageText}</pre>
+            : <Container
+                sx={{
+                    margin: 0,
+                    padding: 0,
+                    pre: {
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word',
+                    },
+                }}>
+                <pre>{messageText}</pre>
+            </Container>
     );
 };