chore: update toc

landing/app/docs/[[...slug]]/page.tsx

@@ -13,7 +13,6 @@ import {
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { APIMethod } from "@/components/api-method";
-import { groupTocItems } from "@/components/docs/group-toc-items";
 import {
 	AddToCursor,
 	DatabaseTable,
@@ -24,7 +23,6 @@ import {
 	GenerateAppleJwt,
 	GenerateSecret,
 } from "@/components/docs/mdx-components";
-import { StepperTOC } from "@/components/docs/stepper-toc";
 import { Callout } from "@/components/ui/callout";
 import { getSource } from "@/lib/source";
 import { cn } from "@/lib/utils";
@@ -47,15 +45,26 @@ export default async function Page({
 	}
 
 	const MDX = page.data.body;
-	const groupedToc = groupTocItems(page.data.toc);
 	const gitBranch = branch === "canary" ? "canary" : "main";
 
 	return (
 		<DocsPage
 			toc={page.data.toc}
 			full={false}
-			tableOfContent={{ enabled: false }}
-			tableOfContentPopover={{ enabled: false }}
+			tableOfContent={{
+				style: "clerk",
+				footer: (
+					<div className="flex items-center gap-2 pt-2 border-t border-foreground/5">
+						<LLMCopyButton
+							rawUrl={`https://raw.githubusercontent.com/better-auth/better-auth/${gitBranch}/docs/content/docs/${page.path}`}
+						/>
+						<ViewOptions
+							markdownUrl={`${page.url}.mdx`}
+							githubUrl={`https://github.com/better-auth/better-auth/blob/${gitBranch}/docs/content/docs/${page.path}`}
+						/>
+					</div>
+				),
+			}}
 			breadcrumb={{ enabled: false }}
 			editOnGithub={{
 				owner: "better-auth",
@@ -64,15 +73,6 @@ export default async function Page({
 				path: `docs/content/docs/${page.path}`,
 			}}
 		>
-			<StepperTOC items={groupedToc}>
-				<LLMCopyButton
-					rawUrl={`https://raw.githubusercontent.com/better-auth/better-auth/${gitBranch}/docs/content/docs/${page.path}`}
-				/>
-				<ViewOptions
-					markdownUrl={`${page.url}.mdx`}
-					githubUrl={`https://github.com/better-auth/better-auth/blob/${gitBranch}/docs/content/docs/${page.path}`}
-				/>
-			</StepperTOC>
 			<DocsTitle>{page.data.title}</DocsTitle>
 			{page.data.description && (
 				<DocsDescription>{page.data.description}</DocsDescription>

landing/app/globals.css

@@ -633,6 +633,7 @@ html:not([data-anchor-scrolling]) {
 	--fd-layout-width: 100vw;
 	--fd-layout-offset: 0px;
 	--fd-page-width: 100%;
+	--fd-banner-height: 44px;
 	--landing-left-pane-width: 22vw;
 	--staggered-nav-cta-width: 128px;
 	padding-top: 44px;
@@ -643,6 +644,7 @@ html:not([data-anchor-scrolling]) {
 	width: 100%;
 	margin-inline: auto;
 	padding-inline-end: 0;
+	padding-block-start: 2rem;
 	transition:
 		width 280ms ease-out,
 		max-width 280ms ease-out,
@@ -684,6 +686,26 @@ html:not([data-anchor-scrolling]) {
 	}
 }
 
+@media (min-width: 80rem) {
+	.docs-layout {
+		--fd-toc-width: 220px;
+		--fd-layout-width: calc(100vw - var(--landing-left-pane-width));
+		padding-inline-start: var(--landing-left-pane-width);
+	}
+
+	.docs-layout #nd-page {
+		width: auto;
+		max-width: none;
+		margin-inline-start: 0;
+		margin-inline-end: 0;
+	}
+
+	.docs-layout #nd-page > article {
+		width: auto;
+		max-width: none;
+	}
+}
+
 /* Blog layout: matches docs pattern with narrow left pane + TOC sidebar */
 .blog-layout {
 	padding-top: 44px;