UI: Fix sticky position for TOC and Sidebar

.changeset/strong-mails-rhyme.md

@@ -0,0 +1,5 @@
+---
+"next-docs-ui": patch
+---
+
+Fix sticky position for TOC and Sidebar

packages/next-docs-ui/src/components/sidebar.tsx

@@ -21,7 +21,7 @@ export function Sidebar({ items }: { items: TreeNode[] }) {
             <aside
                 className={clsx(
                     "nd-flex nd-flex-col nd-gap-2 nd-fixed nd-inset-0 nd-overflow-auto",
-                    "md:nd-sticky md:nd-top-12 md:nd-py-16 md:nd-max-h-[calc(100vh-3rem)]",
+                    "md:nd-sticky md:nd-top-14 md:nd-py-16 md:nd-max-h-[calc(100vh-3.5rem)]",
                     "max-md:nd-pt-20 max-md:nd-pb-4 max-md:nd-px-8 max-md:nd-bg-background/50 max-md:nd-backdrop-blur-xl max-md:nd-z-40"
                 )}
             >

packages/next-docs-ui/src/page.tsx

@@ -19,8 +19,8 @@ export function DocsPage({
                 <Breadcrumb tree={tree} />
                 {children}
             </article>
-            <div className="nd-relative nd-flex nd-flex-col nd-gap-3 nd-py-16 max-xl:nd-hidden">
-                <div className="nd-sticky nd-top-28 nd-flex nd-flex-col nd-gap-1 nd-overflow-auto nd-max-h-[calc(100vh-4rem-3rem)]">
+            <div className="nd-relative max-xl:nd-hidden">
+                <div className="nd-sticky nd-top-14 nd-py-16 nd-flex nd-flex-col nd-gap-1 nd-overflow-auto nd-max-h-[calc(100vh-3.5rem)]">
                     {toc.length > 0 && (
                         <h3 className="nd-font-semibold nd-mb-2">
                             On this page