From ad0b09c3df926b636177647e05c41e7cf7ee55ad Mon Sep 17 00:00:00 2001
From: Jacob Marshall <me@jhqcat.com>
Date: Wed, 29 Jan 2025 17:42:53 +0000
Subject: [PATCH] fix(docs): fix all line and link overflow issues (#426)

---
 .../MdxProvider/MdxLink/MdxLink.tsx           | 38 ++++++++++++-------
 .../MdxProvider/MdxPre/MdxPre.module.css      |  5 ---
 .../components/MdxProvider/MdxPre/MdxPre.tsx  |  3 --
 .../MdxWrapper/MdxWrapper.module.css          |  9 +++++
 .../src/components/MdxWrapper/MdxWrapper.tsx  | 11 +++++-
 5 files changed, 42 insertions(+), 24 deletions(-)
 delete mode 100644 apps/documentation/src/components/MdxProvider/MdxPre/MdxPre.module.css
 create mode 100644 apps/documentation/src/components/MdxWrapper/MdxWrapper.module.css

diff --git a/apps/documentation/src/components/MdxProvider/MdxLink/MdxLink.tsx b/apps/documentation/src/components/MdxProvider/MdxLink/MdxLink.tsx
index a60ed9ba..e3d47641 100644
--- a/apps/documentation/src/components/MdxProvider/MdxLink/MdxLink.tsx
+++ b/apps/documentation/src/components/MdxProvider/MdxLink/MdxLink.tsx
@@ -1,34 +1,44 @@
-import type { JSX, AnchorHTMLAttributes } from 'react'
-import { Button } from '@mantine/core'
+import type { JSX, AnchorHTMLAttributes, ReactNode } from 'react'
+import { Anchor } from '@mantine/core'
 import { Link } from 'tuono'
 import { IconExternalLink } from '@tabler/icons-react'
 
-export default function MdxLink(
-  props: AnchorHTMLAttributes<HTMLAnchorElement>,
-): JSX.Element {
+interface MdxLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: ReactNode
+}
+
+export default function MdxLink(props: MdxLinkProps): JSX.Element {
   if (props.href?.startsWith('http') || props.href?.startsWith('mailto')) {
     return (
-      <Button
-        component="a"
+      <Anchor
         {...props}
         target="_blank"
-        rightSection={
-          <IconExternalLink size="16px" style={{ marginLeft: -5 }} />
-        }
         variant="transparent"
-        style={{ height: '20px' }}
+        display="inline"
+        style={{ fontWeight: 600 }}
         mt={-2}
         p={0}
-      />
+      >
+        {props.children}
+        <IconExternalLink
+          size="16px"
+          style={{
+            marginLeft: '4px',
+            display: 'inline-block',
+            transform: 'translateY(2px)',
+          }}
+        />
+      </Anchor>
     )
   }
   return (
-    <Button
+    <Anchor
       component={Link}
       {...props}
       target="_blank"
       variant="transparent"
-      style={{ height: '20px' }}
+      display="inline"
+      style={{ fontWeight: 600 }}
       mt={-2}
       p={0}
     />
diff --git a/apps/documentation/src/components/MdxProvider/MdxPre/MdxPre.module.css b/apps/documentation/src/components/MdxProvider/MdxPre/MdxPre.module.css
deleted file mode 100644
index 42214acd..00000000
--- a/apps/documentation/src/components/MdxProvider/MdxPre/MdxPre.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.pre {
-  code {
-    font-size: 14px;
-  }
-}
diff --git a/apps/documentation/src/components/MdxProvider/MdxPre/MdxPre.tsx b/apps/documentation/src/components/MdxProvider/MdxPre/MdxPre.tsx
index 5cb2b41f..3699358f 100644
--- a/apps/documentation/src/components/MdxProvider/MdxPre/MdxPre.tsx
+++ b/apps/documentation/src/components/MdxProvider/MdxPre/MdxPre.tsx
@@ -1,8 +1,6 @@
 import type { JSX } from 'react'
 import { CodeHighlight } from '@mantine/code-highlight'
 
-import styles from './MdxPre.module.css'
-
 interface PreProps {
   children: {
     props: {
@@ -15,7 +13,6 @@ interface PreProps {
 export default function MdxPre({ children }: PreProps): JSX.Element {
   return (
     <CodeHighlight
-      className={styles.pre}
       code={children.props.children || ''}
       style={{ borderRadius: 8, fontWeight: 100 }}
       language={children.props.className?.replace('language-', '')}
diff --git a/apps/documentation/src/components/MdxWrapper/MdxWrapper.module.css b/apps/documentation/src/components/MdxWrapper/MdxWrapper.module.css
new file mode 100644
index 00000000..2615a3df
--- /dev/null
+++ b/apps/documentation/src/components/MdxWrapper/MdxWrapper.module.css
@@ -0,0 +1,9 @@
+.wrapper {
+  width: calc(100% - 220px);
+  word-wrap: break-word;
+
+  /* var(--mantine-breakpoint-md) = 62em */
+  @media (max-width: 62em) {
+    width: 100%;
+  }
+}
diff --git a/apps/documentation/src/components/MdxWrapper/MdxWrapper.tsx b/apps/documentation/src/components/MdxWrapper/MdxWrapper.tsx
index 139b21b0..8fbbfbf0 100644
--- a/apps/documentation/src/components/MdxWrapper/MdxWrapper.tsx
+++ b/apps/documentation/src/components/MdxWrapper/MdxWrapper.tsx
@@ -6,20 +6,27 @@ import TableOfContents from '@/components/TableOfContents'
 import EditPage from '../EditPage'
 import MdxProvider from '../MdxProvider'
 
+import classes from './MdxWrapper.module.css'
+
 interface MdxWrapperProps {
   children: ReactNode
 }
 
 export function MdxWrapper({ children }: MdxWrapperProps): JSX.Element {
   return (
-    <Container size={1000} w="100%" display="flex" style={{ gap: 12 }}>
+    <Container
+      size={1000}
+      w="100%"
+      display="flex"
+      style={{ gap: 12, justifyContent: 'space-between' }}
+    >
       <Box
         id="mdx-root"
         component="article"
         mt="xl"
         px={16}
         py={36}
-        style={{ maxWidth: '100%' }}
+        className={classes.wrapper}
       >
         <MdxProvider>{children}</MdxProvider>
         <EditPage />