chore(website): Add word-break to headings for markdown pages

mlaursen · Jan 18, 2022 · 03b1301 · 03b1301 · vercel · Jan 19, 2022
1 parent 7cd7b8c
commit 03b1301
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git 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
@@ -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>
     );