Pagination updates

Signed-off-by: gpbl <io@gpbl.dev>
gpbl · Mar 2, 2024 · 45cca30 · 45cca30
1 parent 0ff2d0e
commit 45cca30
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/website/components/DocsLayout.tsx b/website/components/DocsLayout.tsx
@@ -45,17 +45,17 @@ export function DocsLayout(props: DocsLayoutProps) {
           <DocHeader doc={doc} />
           <Separator size="4" my="8" mt="4" />
           <article>{props.children}</article>
-          {doc.pagination && (
-            <>
-              <Separator size="4" my="4" mt="8" />
-              <Pagination
-                nextDoc={nextDoc}
-                previousDoc={previousDoc}
-                currentDoc={doc}
-              />
-            </>
-          )}
         </main>
+        {doc.pagination && (
+          <nav>
+            <Separator size="4" my="4" mt="8" />
+            <Pagination
+              nextDoc={nextDoc}
+              previousDoc={previousDoc}
+              currentDoc={doc}
+            />
+          </nav>
+        )}
       </Box>
 
       {/* toc */}

diff --git a/website/components/Pagination.tsx b/website/components/Pagination.tsx
@@ -14,14 +14,14 @@ export function Pagination(props: PaginationProps) {
   const nextPageTitle = nextDoc?.navigationLabel || nextDoc?.title;
 
   return (
-    <Flex asChild justify="between" wrap="wrap-reverse" width="100%" gap="4">
+    <Flex asChild width="100%" gap="4" wrap="wrap-reverse">
       <section aria-label="Page navigation">
-        <Box shrink="0" grow="1">
+        <Box style={{ flex: "1 0 30%" }}>
           {previousDoc?.path && (
-            <Card size="2" asChild>
+            <Card size="2" asChild variant="ghost">
               <Link
                 href={"/" + previousDoc?.path}
-                style={{ textDecoration: "none" }}
+                style={{ textDecoration: "none", whiteSpace: "nowrap" }}
                 aria-label={`Previous page: ${prevPageTitle}`}
               >
                 <Text as="div" align="left" color="gray" size="2">
@@ -37,12 +37,12 @@ export function Pagination(props: PaginationProps) {
             </Card>
           )}
         </Box>
-        <Box shrink="0" grow="1">
+        <Box style={{ flex: "1 0 30%" }}>
           {nextDoc?.path && (
-            <Card size="2" asChild>
+            <Card size="2" asChild variant="ghost">
               <Link
                 href={"/" + nextDoc?.path}
-                style={{ textDecoration: "none" }}
+                style={{ textDecoration: "none", whiteSpace: "nowrap" }}
                 aria-label={`Next page: ${nextPageTitle}`}
               >
                 <Text as="div" align="right" color="gray">