fix: Long katex strings breaking overflow in x axis (#32609)

RocketChat · Jun 17, 2024 · 59df102 · 59df102
1 parent 9795e58
commit 59df102
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/.changeset/healthy-clouds-hide.md b/.changeset/healthy-clouds-hide.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/gazzodown": patch
+---
+
+Fixes long katex lines overflowing the message component
diff --git a/packages/gazzodown/src/katex/KatexBlock.tsx b/packages/gazzodown/src/katex/KatexBlock.tsx
@@ -19,7 +19,7 @@ const KatexBlock = ({ code }: KatexBlockProps): ReactElement => {
 		[code],
 	);
 
-	return <div role='math' aria-label={code} dangerouslySetInnerHTML={{ __html: html }} />;
+	return <div role='math' style={{ overflowX: 'auto' }} aria-label={code} dangerouslySetInnerHTML={{ __html: html }} />;
 };
 
 export default KatexBlock;