fix: fix markdown component text overflow (#209) (#210)

Co-authored-by: Fran McDade <[email protected]>
DataBiosphere · Sep 27, 2024 · 5f97fb6 · 5f97fb6
1 parent d5f4226
commit 5f97fb6
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/src/components/common/Markdown/markdown.tsx b/src/components/common/Markdown/markdown.tsx
@@ -1,13 +1,19 @@
 // TODO deprecate component if possible (see MDXMarkdown)
+import { Box as MBox, BoxProps as MBoxProps } from "@mui/material";
 import DOMPurify from "isomorphic-dompurify";
 import React from "react";
 
 export interface MarkdownProps {
   content: string;
+  sx?: MBoxProps["sx"];
 }
 
-export const Markdown = ({ content }: MarkdownProps): JSX.Element => {
+export const Markdown = ({ content, sx }: MarkdownProps): JSX.Element => {
   return (
-    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content) }} />
+    <MBox
+      component="div"
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content) }}
+      sx={{ minWidth: 0, wordBreak: "break-word", ...sx }}
+    />
   );
 };