fix(website): docs sidebar overflowing onto footer (#227)

* fix(website): docs sidebar overflowing onto footer

Sidebar was fixed-positioned, so it stayed pinned to the viewport and
visually overlapped the footer on scroll. Switched to sticky
positioning inside a flex layout — sticky releases when its parent
ends, so the sidebar now stops at the bottom of the docs content.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(website): use max-h on sidebar to prevent overflow on short pages

Co-authored-by: Jason Waldrip <jwaldrip@users.noreply.github.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Jason Waldrip <jwaldrip@users.noreply.github.com>

Author: 3 people

website/app/components/DocsSidebar.tsx

@@ -22,7 +22,7 @@ export function DocsSidebar({ navigation }: DocsSidebarProps) {
 	const pathname = usePathname()
 
 	return (
-		<aside className="fixed right-[max(1rem,calc((100vw-80rem)/2+1rem))] top-20 z-30 hidden h-[calc(100vh-5rem)] w-64 overflow-y-auto pb-8 lg:block">
+		<aside className="sticky top-20 hidden max-h-[calc(100vh-5rem)] w-64 shrink-0 self-start overflow-y-auto pb-8 lg:block">
 			<nav className="space-y-6">
 				{navigation.map((section) => (
 					<div key={section.title}>

website/app/docs/layout.tsx

@@ -6,9 +6,11 @@ export default function DocsLayout({ children }: { children: ReactNode }) {
 	const navigation = getDocsNavigation()
 
 	return (
-		<div className="mx-auto max-w-7xl px-4 py-8 lg:py-12 lg:pr-72">
-			<DocsSidebar navigation={navigation} />
-			<div className="min-w-0">{children}</div>
+		<div className="mx-auto max-w-7xl px-4 py-8 lg:py-12">
+			<div className="lg:flex lg:gap-8">
+				<div className="min-w-0 flex-1">{children}</div>
+				<DocsSidebar navigation={navigation} />
+			</div>
 		</div>
 	)
 }