Merge pull request #12460 from ethereum/dev-docs-layout

Fix: dev docs layout on medium screen sizes [Fixes #8364]

Author: nhsz

src/components/DocsNav.tsx

@@ -58,8 +58,8 @@ const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
     <LinkBox
       as={Flex}
       alignItems="center"
-      mt={4}
-      w="262px"
+      w="full"
+      flex="1"
       h="82px"
       bg="background.base"
       border="1px"
@@ -145,7 +145,14 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
     <Flex
       as="nav"
       aria-label="Paginate to document"
-      direction={{ base: "column-reverse", md: "row" }}
+      direction={{
+        base: "column-reverse",
+        md: "row",
+        lg: "column-reverse",
+        xl: "row",
+      }}
+      mt="8"
+      gap="4"
       justify="space-between"
       alignItems={{ base: "center", md: "flex-start" }}
     >

src/components/SideNav.tsx

@@ -156,8 +156,8 @@ const SideNav = ({ path }: SideNavProps) => {
       pt={8}
       pb={16}
       h="calc(100vh - 80px)" // TODO take footer into account for height?
-      w="calc((100% - 1448px) / 2 + 298px)"
-      minW="298px"
+      w="calc((100% - 1448px) / 2 + 256px)"
+      minW="256px"
       overflowY="auto"
       transition="transform 0.2s ease"
       bgColor="background.base"

src/layouts/Docs.tsx

@@ -150,7 +150,7 @@ const Content = (props: ChildOnlyProp) => {
     <Box
       as={MainArticle}
       flex={`1 1 ${mdBreakpoint}`}
-      maxW={{ base: "full", lg: mdBreakpoint }}
+      w={{ base: "full", lg: "0" }}
       pt={{ base: 32, md: 12 }}
       pb={{ base: 8, md: 16 }}
       px={{ base: 8, md: 16 }}