From 6402f42d014a27d6637a7c0f5c82452454d6b400 Mon Sep 17 00:00:00 2001
From: Valerio Ageno <valerioageno@yahoo.it>
Date: Sat, 17 Aug 2024 20:08:23 +0200
Subject: [PATCH] fix: documentation mdx container

---
 .../mdx-provider/mdx-pre/mdx-pre.tsx          |  2 +-
 apps/documentation/src/routes/__root.tsx      |  1 -
 .../src/routes/documentation/__root.tsx       | 22 +++++++++----------
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/apps/documentation/src/components/mdx-provider/mdx-pre/mdx-pre.tsx b/apps/documentation/src/components/mdx-provider/mdx-pre/mdx-pre.tsx
index 4b8c4fea..1918378c 100644
--- a/apps/documentation/src/components/mdx-provider/mdx-pre/mdx-pre.tsx
+++ b/apps/documentation/src/components/mdx-provider/mdx-pre/mdx-pre.tsx
@@ -8,8 +8,8 @@ export default function MdxPre({ children }: PreProps): JSX.Element {
   return (
     <CodeHighlight
       className={styles.pre}
-      style={{ borderRadius: 8 }}
       code={children.props.children || ''}
+      style={{ borderRadius: 8 }}
       language={children.props.className?.replace('language-', '')}
     />
   )
diff --git a/apps/documentation/src/routes/__root.tsx b/apps/documentation/src/routes/__root.tsx
index 9d53fedb..f11047d1 100644
--- a/apps/documentation/src/routes/__root.tsx
+++ b/apps/documentation/src/routes/__root.tsx
@@ -10,7 +10,6 @@ import { Head, useRouter } from 'tuono'
 import Navbar from '../components/navbar'
 
 import '@mantine/core/styles.css'
-import '@mantine/code-highlight/styles.css'
 import Sidebar from '../components/sidebar'
 
 interface RootRouteProps {
diff --git a/apps/documentation/src/routes/documentation/__root.tsx b/apps/documentation/src/routes/documentation/__root.tsx
index 89847790..639ba5b4 100644
--- a/apps/documentation/src/routes/documentation/__root.tsx
+++ b/apps/documentation/src/routes/documentation/__root.tsx
@@ -1,9 +1,11 @@
 import type { ReactNode } from 'react'
-import { AppShell, Container, Flex } from '@mantine/core'
+import { AppShell, Container } from '@mantine/core'
 import MdxProvider from '../../components/mdx-provider'
 import EditPage from '../../components/edit-page'
 import TableOfContents from '../../components/table-of-content'
 
+import '@mantine/code-highlight/styles.css'
+
 interface RootRouteProps {
   children: ReactNode
 }
@@ -11,16 +13,14 @@ interface RootRouteProps {
 export default function RootRoute({ children }: RootRouteProps): JSX.Element {
   return (
     <AppShell.Main>
-      <Container size="lg" p={5}>
-        <Flex>
-          <Container id="mdx-root" component="article">
-            <MdxProvider>{children}</MdxProvider>
-            <EditPage />
-          </Container>
-          <Container size="xs" visibleFrom="lg">
-            <TableOfContents withTabs={false} />
-          </Container>
-        </Flex>
+      <Container size="lg" p={20} display={{ lg: 'flex' }}>
+        <Container id="mdx-root" component="article" size="md" p={0}>
+          <MdxProvider>{children}</MdxProvider>
+          <EditPage />
+        </Container>
+        <Container size="xs" visibleFrom="lg" p={0}>
+          <TableOfContents withTabs={false} />
+        </Container>
       </Container>
     </AppShell.Main>
   )