From 5e903016a281afa388dfd3d73f625e9e06f4d5a0 Mon Sep 17 00:00:00 2001
From: Colin Murphy <colinmurphy@users.noreply.github.com>
Date: Mon, 27 Jan 2025 18:24:50 +0000
Subject: [PATCH 1/2] Various fixes

1. Removed scroll-overflow class to fix sidebar
2. Removed loading text as it was displaying on pages where there was no headings
3. Added breadcrumb back in for /docs
---
 src/components/docs-breadcrumbs.jsx | 6 +++++-
 src/components/docs-layout.jsx      | 2 +-
 src/components/on-this-page-nav.jsx | 4 +---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/docs-breadcrumbs.jsx b/src/components/docs-breadcrumbs.jsx
index 47b3eb3c..ead1de30 100644
--- a/src/components/docs-breadcrumbs.jsx
+++ b/src/components/docs-breadcrumbs.jsx
@@ -34,7 +34,7 @@ export default function DocsBreadcrumbs({ routes }) {
 	const currentPath = router.pathname;
 	const breadcrumbLinks = generateBreadcrumbs(routes, currentPath);
 
-	if (breadcrumbLinks.length === 0 || currentPath === "/docs") {
+	if (breadcrumbLinks.length === 0) {
 		return;
 	}
 
@@ -42,6 +42,10 @@ export default function DocsBreadcrumbs({ routes }) {
 	homeRoute.title = "Docs";
 	breadcrumbLinks.unshift(homeRoute);
 
+	if (currentPath === "/docs") {
+		breadcrumbLinks.shift(0);
+	}
+
 	return (
 		<div className="mt-4 mb-7 md:mt-2 md:mb-10">
 			<div className="flex flex-wrap items-center gap-2 text-sm">
diff --git a/src/components/docs-layout.jsx b/src/components/docs-layout.jsx
index b536f77e..ad611120 100644
--- a/src/components/docs-layout.jsx
+++ b/src/components/docs-layout.jsx
@@ -58,7 +58,7 @@ export default function DocumentPage({ children, metadata }) {
 					/>
 				</DisclosurePanel>
 			</Disclosure>
-			<main className="relative mx-auto flex max-w-full grid-cols-[1fr_auto_1fr] flex-col gap-6 overflow-scroll md:grid">
+			<main className="relative mx-auto flex max-w-full grid-cols-[1fr_auto_1fr] flex-col gap-6 md:grid">
 				<nav className="sticky top-[84px] hidden h-min w-60 overflow-y-auto p-6 md:block">
 					<DocsNav routes={routes} />
 				</nav>
diff --git a/src/components/on-this-page-nav.jsx b/src/components/on-this-page-nav.jsx
index 2c5d8784..45c655cc 100644
--- a/src/components/on-this-page-nav.jsx
+++ b/src/components/on-this-page-nav.jsx
@@ -48,7 +48,7 @@ export default function OnThisPageNav({ children }) {
 	return (
 		<>
 			<h2 className="font-semibold">On This Page</h2>
-			{headings.length > 0 ? (
+			{headings.length > 0 && (
 				<ul className="mt-4 text-sm text-gray-400">
 					{headings.map((heading) => (
 						<li
@@ -68,8 +68,6 @@ export default function OnThisPageNav({ children }) {
 						</li>
 					))}
 				</ul>
-			) : (
-				<p>Loading...</p>
 			)}
 		</>
 	);

From 60521ad7c52a798832be357647e566217220c9b1 Mon Sep 17 00:00:00 2001
From: Colin Murphy <colinmurphy@users.noreply.github.com>
Date: Tue, 28 Jan 2025 13:24:57 +0000
Subject: [PATCH 2/2] Various fixes

1. Fixed vertical height of the docs content

2. Added a vetical scroll to the left hand sidebar
---
 src/components/docs-layout.jsx      | 6 +++---
 src/components/on-this-page-nav.jsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/docs-layout.jsx b/src/components/docs-layout.jsx
index ad611120..3a2a6886 100644
--- a/src/components/docs-layout.jsx
+++ b/src/components/docs-layout.jsx
@@ -59,13 +59,13 @@ export default function DocumentPage({ children, metadata }) {
 				</DisclosurePanel>
 			</Disclosure>
 			<main className="relative mx-auto flex max-w-full grid-cols-[1fr_auto_1fr] flex-col gap-6 md:grid">
-				<nav className="sticky top-[84px] hidden h-min w-60 overflow-y-auto p-6 md:block">
+				<nav className="sticky top-[84px] hidden h-[calc(100vh-84px)] w-60 overflow-y-auto p-6 md:block">
 					<DocsNav routes={routes} />
 				</nav>
-				<nav className="sticky top-[84px] order-last hidden h-min w-[240px] overflow-y-auto p-6 lg:block">
+				<nav className="sticky top-[84px] order-last hidden h-[calc(100vh-84px)] w-[240px] overflow-y-auto p-6 lg:block">
 					<OnThisPageNav>{children}</OnThisPageNav>
 				</nav>
-				<article className="container-main xs:py-20 prose prose-invert min-h-[calc(100vh-120px)] max-w-full py-0 sm:max-w-[80ch] sm:py-20 md:py-24">
+				<article className="container-main xs:py-20 prose prose-invert min-h-[calc(100vh-120px)] max-w-full py-0 sm:max-w-[80ch] sm:py-20 md:py-8">
 					<DocsBreadcrumbs routes={flatRoutes} />
 					{metadata?.title && (
 						<h1 className="article-title break-words">{metadata.title}</h1>
diff --git a/src/components/on-this-page-nav.jsx b/src/components/on-this-page-nav.jsx
index 45c655cc..b804fd2d 100644
--- a/src/components/on-this-page-nav.jsx
+++ b/src/components/on-this-page-nav.jsx
@@ -47,7 +47,7 @@ export default function OnThisPageNav({ children }) {
 
 	return (
 		<>
-			<h2 className="font-semibold">On This Page</h2>
+			<h2 className="py-2 font-semibold">On This Page</h2>
 			{headings.length > 0 && (
 				<ul className="mt-4 text-sm text-gray-400">
 					{headings.map((heading) => (