diff --git a/client/components/MarkdownText.tsx b/client/components/MarkdownText.tsx
index c567c2b343a5f..d89000c6db826 100644
--- a/client/components/MarkdownText.tsx
+++ b/client/components/MarkdownText.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import dompurify from 'dompurify';
 import marked from 'marked';
-import React, { FC, useMemo } from 'react';
+import React, { ComponentProps, FC, useMemo } from 'react';
 
 import { renderMessageEmoji } from '../lib/renderMessageEmoji';
 
@@ -11,7 +11,7 @@ type MarkdownTextParams = {
 	preserveHtml: boolean;
 	parseEmoji: boolean;
 	withTruncatedText: boolean;
-};
+} & ComponentProps<typeof Box>;
 
 const documentRenderer = new marked.Renderer();
 const inlineRenderer = new marked.Renderer();
diff --git a/ee/client/omnichannel/components/CannedResponse/TextEditor/Textarea.tsx b/ee/client/omnichannel/components/CannedResponse/TextEditor/Textarea.tsx
index bcd222419a677..6307c1bf8c556 100644
--- a/ee/client/omnichannel/components/CannedResponse/TextEditor/Textarea.tsx
+++ b/ee/client/omnichannel/components/CannedResponse/TextEditor/Textarea.tsx
@@ -9,6 +9,7 @@ const Textarea = forwardRef<Element, TextareaProps>(function Textarea(props, ref
 			is='textarea'
 			ref={ref}
 			w='full'
+			style={{ wordBreak: 'normal' }}
 			rcx-box--animated
 			rcx-input-box--type={'textarea'}
 			rcx-input-box--undecorated
diff --git a/ee/client/omnichannel/components/CannedResponse/modals/CreateCannedResponse/PreviewText.tsx b/ee/client/omnichannel/components/CannedResponse/modals/CreateCannedResponse/PreviewText.tsx
index 7d54c3f6725b3..38d1d9916376f 100644
--- a/ee/client/omnichannel/components/CannedResponse/modals/CreateCannedResponse/PreviewText.tsx
+++ b/ee/client/omnichannel/components/CannedResponse/modals/CreateCannedResponse/PreviewText.tsx
@@ -3,19 +3,23 @@ import React, { FC, memo } from 'react';
 
 import MarkdownText from '../../../../../../../client/components/MarkdownText';
 
-const PreviewText: FC<{ text: string }> = ({ text }) => (
-	<Box
-		rows={10}
-		display='flex'
-		flexDirection='column'
-		pbs='12px'
-		pi='16px'
-		pbe='16px'
-		rcx-box--animated
-		rcx-input-box__wrapper
-	>
-		<MarkdownText content={text} parseEmoji={true} />
-	</Box>
-);
+const PreviewText: FC<{ text: string }> = ({ text }) => {
+	const textM = text.split(/\n/).join('  \n');
+
+	return (
+		<Box
+			style={{ wordBreak: 'normal' }}
+			display='flex'
+			flexDirection='column'
+			pbs='12px'
+			pi='16px'
+			pbe='16px'
+			rcx-box--animated
+			rcx-input-box__wrapper
+		>
+			<MarkdownText w='full' flexGrow={1} content={textM} parseEmoji={true} />
+		</Box>
+	);
+};
 
 export default memo(PreviewText);