From fc0be0d78d7af383ab9e496dc111afb135e7d678 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 21 Aug 2021 17:33:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E9=95=BF=E6=96=87=E6=9C=AC=E6=8D=A2=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/ChatBox/ChatMessageList/Item.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/ChatBox/ChatMessageList/Item.tsx b/web/src/components/ChatBox/ChatMessageList/Item.tsx
index 846d4f51..4034a097 100644
--- a/web/src/components/ChatBox/ChatMessageList/Item.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/Item.tsx
@@ -20,7 +20,7 @@ export const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo(
       <div
         className={clsx('flex px-2 group hover:bg-black hover:bg-opacity-10')}
       >
-        <div className="w-18 flex items-center justify-center">
+        <div className="w-18 flex items-start justify-center pt-0.5">
           {showAvatar ? (
             <Avatar size={40} src={userInfo.avatar} name={userInfo.nickname} />
           ) : (
@@ -29,7 +29,7 @@ export const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo(
             </div>
           )}
         </div>
-        <div className="flex flex-col">
+        <div className="flex flex-col flex-1 overflow-auto">
           {showAvatar && (
             <div className="flex items-center">
               <div className="font-bold">{userInfo.nickname}</div>
@@ -39,7 +39,7 @@ export const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo(
             </div>
           )}
 
-          <div className="leading-6">{payload.content}</div>
+          <div className="leading-6 break-words">{payload.content}</div>
         </div>
       </div>
     );