diff --git a/app/components/mdx/mdx.tsx b/app/components/mdx/mdx.tsx
index cd1348aa..a1f11c6c 100644
--- a/app/components/mdx/mdx.tsx
+++ b/app/components/mdx/mdx.tsx
@@ -17,7 +17,7 @@ export function Mdx({ code }: MdxProps) {
   const Component = useMDXComponent(code);
 
   return (
-    <article className="prose-a:text-gray-90 prose prose-lg max-w-none text-lg text-gray-600 prose-headings:text-gray-900 prose-h2:scroll-mt-28 prose-p:leading-normal prose-a:font-normal hover:prose-a:underline prose-blockquote:border-none prose-blockquote:pl-0 prose-blockquote:font-medium prose-blockquote:italic prose-blockquote:text-gray-900 prose-strong:font-medium prose-strong:text-gray-900 dark:text-gray-300 dark:prose-headings:text-gray-100 dark:prose-a:text-gray-100 dark:prose-blockquote:text-gray-100 dark:prose-strong:text-gray-100">
+    <article className="prose-a:text-gray-90 prose prose-lg max-w-none break-words text-lg text-gray-600 prose-headings:text-gray-900 prose-h2:scroll-mt-28 prose-p:leading-normal prose-a:font-normal hover:prose-a:underline prose-blockquote:border-none prose-blockquote:pl-0 prose-blockquote:font-medium prose-blockquote:italic prose-blockquote:text-gray-900 prose-strong:font-medium prose-strong:text-gray-900 dark:text-gray-300 dark:prose-headings:text-gray-100 dark:prose-a:text-gray-100 dark:prose-blockquote:text-gray-100 dark:prose-strong:text-gray-100">
       <Component components={{ ...mdxComponents }} />
     </article>
   );
diff --git a/docs/components/mdx/mdx.tsx b/docs/components/mdx/mdx.tsx
index cd1348aa..a1f11c6c 100644
--- a/docs/components/mdx/mdx.tsx
+++ b/docs/components/mdx/mdx.tsx
@@ -17,7 +17,7 @@ export function Mdx({ code }: MdxProps) {
   const Component = useMDXComponent(code);
 
   return (
-    <article className="prose-a:text-gray-90 prose prose-lg max-w-none text-lg text-gray-600 prose-headings:text-gray-900 prose-h2:scroll-mt-28 prose-p:leading-normal prose-a:font-normal hover:prose-a:underline prose-blockquote:border-none prose-blockquote:pl-0 prose-blockquote:font-medium prose-blockquote:italic prose-blockquote:text-gray-900 prose-strong:font-medium prose-strong:text-gray-900 dark:text-gray-300 dark:prose-headings:text-gray-100 dark:prose-a:text-gray-100 dark:prose-blockquote:text-gray-100 dark:prose-strong:text-gray-100">
+    <article className="prose-a:text-gray-90 prose prose-lg max-w-none break-words text-lg text-gray-600 prose-headings:text-gray-900 prose-h2:scroll-mt-28 prose-p:leading-normal prose-a:font-normal hover:prose-a:underline prose-blockquote:border-none prose-blockquote:pl-0 prose-blockquote:font-medium prose-blockquote:italic prose-blockquote:text-gray-900 prose-strong:font-medium prose-strong:text-gray-900 dark:text-gray-300 dark:prose-headings:text-gray-100 dark:prose-a:text-gray-100 dark:prose-blockquote:text-gray-100 dark:prose-strong:text-gray-100">
       <Component components={{ ...mdxComponents }} />
     </article>
   );