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%;
           }
         `,
       ),