From 03b13015c5840f7d0964cfe31cb169bd6c4e2208 Mon Sep 17 00:00:00 2001
From: Mikkel Laursen <mlaursen03@gmail.com>
Date: Tue, 18 Jan 2022 16:55:57 -0700
Subject: [PATCH] chore(website): Add word-break to headings for markdown pages

---
 .../src/components/Markdown/renderers.module.scss          | 4 ++++
 .../documentation/src/components/Markdown/renderers.tsx    | 7 ++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/documentation/src/components/Markdown/renderers.module.scss b/packages/documentation/src/components/Markdown/renderers.module.scss
index a00ad795b9..80601ef6d1 100644
--- a/packages/documentation/src/components/Markdown/renderers.module.scss
+++ b/packages/documentation/src/components/Markdown/renderers.module.scss
@@ -1,3 +1,7 @@
+.heading {
+  word-break: break-word;
+}
+
 .task {
   list-style: none;
   margin-left: -2.5rem;
diff --git a/packages/documentation/src/components/Markdown/renderers.tsx b/packages/documentation/src/components/Markdown/renderers.tsx
index f358a3ad1d..248d0171d8 100644
--- a/packages/documentation/src/components/Markdown/renderers.tsx
+++ b/packages/documentation/src/components/Markdown/renderers.tsx
@@ -80,7 +80,12 @@ export const renderers: MarkdownRenderers = {
 
     const id = useSluggedId(tokens);
     return (
-      <Typography id={id} type={type} suppressHydrationWarning>
+      <Typography
+        id={id}
+        type={type}
+        className={styles.heading}
+        suppressHydrationWarning
+      >
         {children}
       </Typography>
     );