fix(docs): fix all line and link overflow issues (#426)

apps/documentation/src/components/MdxProvider/MdxLink/MdxLink.tsx

@@ -1,34 +1,44 @@
-import type { JSX, AnchorHTMLAttributes } from 'react'
+import type { JSX, AnchorHTMLAttributes, ReactNode } from 'react'
-import { Button } from '@mantine/core'
+import { Anchor } from '@mantine/core'
 import { Link } from 'tuono'
 import { IconExternalLink } from '@tabler/icons-react'
 
-export default function MdxLink(
+interface MdxLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  props: AnchorHTMLAttributes<HTMLAnchorElement>,
+  children: ReactNode
-): JSX.Element {
+}
+
+export default function MdxLink(props: MdxLinkProps): JSX.Element {
   if (props.href?.startsWith('http') || props.href?.startsWith('mailto')) {
     return (
-      <Button
+      <Anchor
-        component="a"
         {...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}
     />

apps/documentation/src/components/MdxProvider/MdxPre/MdxPre.module.css

@@ -1,5 +0,0 @@
-.pre {
-  code {
-    font-size: 14px;
-  }
-}

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-', '')}

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%;
+  }
+}

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 />