From 94cb14b9785a3de5f91f798e484e0d2cd6950866 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 5 Dec 2022 18:13:26 +0100
Subject: [PATCH] Add gap between md content and right nav [Fixes #77] (#110)

* add gap between md content and right nav

* shorten max width of right nav divider

* make DocumentNav width responsive

Existing fixed width was too large after the 2rem of padding was added. Simply making it more narrow made it unnecessarily small on larger screen sizes. Clamp sets a min of chakra-size-40, max of chakra-size-58, while targeting an eighth of the screen width.
---
 src/pages/[...slug].tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index 9119adae5a..db92232ee2 100644
--- a/src/pages/[...slug].tsx
+++ b/src/pages/[...slug].tsx
@@ -115,7 +115,7 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
               </Text>
             </Stack>
 
-            <Flex width='100%' placeContent='space-between'>
+            <Flex width='100%' placeContent='space-between' gap={8}>
               <Stack maxW='768px' sx={{ "*:first-child": { marginTop: '0 !important' } }}>
                 <ReactMarkdown
                   remarkPlugins={[gfm]}
@@ -126,7 +126,7 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
                 </ReactMarkdown>
               </Stack>
 
-              <Stack display={{ base: 'none', xl: 'block' }} w={48}>
+              <Stack display={{ base: 'none', xl: 'block' }} w="clamp(var(--chakra-sizes-40), 12.5%, var(--chakra-sizes-56))">
                 <DocumentNav content={content} />
               </Stack>
             </Flex>