From 8081667e3056c956401a9b8aa14cb226507cb025 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Fri, 17 Nov 2023 14:01:28 +0800
Subject: [PATCH] =?UTF-8?q?:iphone:=20style:=20error=20=E5=85=BC=E5=AE=B9?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ChatItem/components/ErrorContent.tsx |  4 ++--
 src/ChatItem/style.ts                    | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/ChatItem/components/ErrorContent.tsx b/src/ChatItem/components/ErrorContent.tsx
index 8f09f7a4..53949834 100644
--- a/src/ChatItem/components/ErrorContent.tsx
+++ b/src/ChatItem/components/ErrorContent.tsx
@@ -16,8 +16,8 @@ const ErrorContent = memo<ErrorContentProps>(({ message, error, placement }) =>
   const { styles } = useStyles({ placement });
 
   return (
-    <Flexbox gap={8}>
-      <Alert className={styles.alert} showIcon type={'error'} {...error} />
+    <Flexbox className={styles.errorContent} gap={8}>
+      <Alert showIcon type={'error'} {...error} />
       {message}
     </Flexbox>
   );
diff --git a/src/ChatItem/style.ts b/src/ChatItem/style.ts
index 4a320178..934cb5e9 100644
--- a/src/ChatItem/style.ts
+++ b/src/ChatItem/style.ts
@@ -67,7 +67,6 @@ export const useStyles = createStyles(
             opacity: 0 !important;
           `,
       ),
-      alert: css``,
       avatarContainer: css`
         position: relative;
         flex: none;
@@ -134,6 +133,11 @@ export const useStyles = createStyles(
       editingInput: css`
         width: 100%;
       `,
+      errorContent: css`
+        ${responsive.mobile} {
+          width: 100%;
+        }
+      `,
       loading: css`
         position: absolute;
         right: ${placement === 'left' ? '-4px' : 'unset'};
@@ -158,6 +162,10 @@ export const useStyles = createStyles(
         editingStylish,
         css`
           position: relative;
+
+          ${responsive.mobile} {
+            max-width: 100%;
+          }
         `,
       ),
       messageContent: cx(
@@ -168,6 +176,7 @@ export const useStyles = createStyles(
 
           ${responsive.mobile} {
             flex-direction: column !important;
+            width: 100%;
           }
         `,
       ),