From e4a77559dbd2a881bbbc98d6a29fb9435501d3d3 Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Mon, 27 Mar 2023 12:14:22 +0800
Subject: [PATCH] fix: message view overflow

---
 components/ChatView/MessageView.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/ChatView/MessageView.tsx b/components/ChatView/MessageView.tsx
index 20fe29c..647cf28 100644
--- a/components/ChatView/MessageView.tsx
+++ b/components/ChatView/MessageView.tsx
@@ -15,7 +15,11 @@ const MessageView = (props: Props) => {
   const isCurrentUser = message.creatorId === userStore.currentUser.id;
 
   return (
-    <div className={`w-full flex flex-row justify-start items-start my-4 ${isCurrentUser ? "justify-end pl-8 sm:pl-24" : "pr-8 sm:pr-24"}`}>
+    <div
+      className={`w-full max-w-full flex flex-row justify-start items-start my-4 ${
+        isCurrentUser ? "justify-end pl-8 sm:pl-24" : "pr-8 sm:pr-24"
+      }`}
+    >
       {isCurrentUser ? (
         <>
           <div className="mt-0.5 w-auto max-w-full bg-indigo-600 text-white px-4 py-2 rounded-lg rounded-tr-none shadow whitespace-pre-wrap">
@@ -31,7 +35,7 @@ const MessageView = (props: Props) => {
             <Icon.AiOutlineRobot className="w-6 h-6" />
           </div>
           <ReactMarkdown
-            className="mt-0.5 w-auto max-w-full bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow prose prose-neutral"
+            className="mt-0.5 w-auto max-w-[calc(100%-3rem)] bg-gray-100 px-4 py-2 rounded-lg rounded-tl-none shadow prose prose-neutral"
             remarkPlugins={[remarkGfm]}
             components={{
               pre({ node, className, children, ...props }) {