diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js
index 99c1c8b4f..ba9f569b2 100644
--- a/packages/react/src/views/ChatInput/ChatInput.js
+++ b/packages/react/src/views/ChatInput/ChatInput.js
@@ -423,7 +423,11 @@ const ChatInput = ({ scrollToBottom }) => {
 
   return (
     <Box className={`ec-chat-input ${classNames}`} style={styleOverrides}>
-      <Box>
+      <Box
+        css={css`
+          max-width: 100%;
+        `}
+      >
         {(quoteMessage.msg || quoteMessage.attachments) && (
           <QuoteMessage message={quoteMessage} />
         )}
diff --git a/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js b/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
index 5ffe32dd2..1b6619ea9 100644
--- a/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
+++ b/packages/react/src/views/QuoteMessage/QuoteMessage.styles.js
@@ -12,6 +12,8 @@ const getQuoteMessageStyles = (theme) => {
       z-index: 1200;
       border: 1px solid ${theme.colors.border};
       border-radius: ${theme.radius};
+      max-width: 100%;
+      box-sizing: border-box;
     `,
 
     avatarContainer: css`
@@ -22,6 +24,10 @@ const getQuoteMessageStyles = (theme) => {
 
     message: css`
       padding: 0.25rem;
+      overflow-wrap: break-word;
+      word-break: break-word;
+      white-space: normal;
+      width: 100%;
     `,
 
     actionBtn: css`