From f502f841442b9115b5a21390bbae403a5d5c9dc5 Mon Sep 17 00:00:00 2001
From: Lawrence Chen <54008264+lawrencecchen@users.noreply.github.com>
Date: Mon, 23 Feb 2026 20:09:44 -0800
Subject: [PATCH] Add Read the Docs link below bottom CTA on homepage (#411)

* Add "Read the Docs" link below bottom CTA on homepage

* Increase top padding on Read the Docs link

* Reduce docs horizontal padding on mobile

* Align docs content with header on mobile, increase top padding

* Make sticky header fully opaque with subtle bottom border

* Fix sticky header on mobile by containing horizontal overflow in content area

Wide content (hierarchy diagrams, code blocks) was causing horizontal
page scroll, which breaks position:sticky on mobile browsers. Added
overflow-x:hidden to the main content area (below the header in DOM)
and overflow-x:auto to docs pre blocks so they scroll internally.

* Remove bottom border from sticky header
---
 web/app/components/site-header.tsx | 2 +-
 web/app/docs/docs-nav.tsx          | 6 +++---
 web/app/globals.css                | 5 +++++
 web/app/page.tsx                   | 8 ++++++++
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/web/app/components/site-header.tsx b/web/app/components/site-header.tsx
index ad7e6202..bc4da923 100644
--- a/web/app/components/site-header.tsx
+++ b/web/app/components/site-header.tsx
@@ -22,7 +22,7 @@ export function SiteHeader({
 
   return (
     <>
-      <header className="sticky top-0 z-30 w-full bg-background/80 backdrop-blur-sm">
+      <header className="sticky top-0 z-30 w-full bg-background">
         <div className="w-full max-w-6xl mx-auto flex items-center px-6 h-12">
           {/* Left: logo + section */}
           <div className="flex flex-1 items-center gap-3 min-w-0">
diff --git a/web/app/docs/docs-nav.tsx b/web/app/docs/docs-nav.tsx
index 30827c7d..243fac73 100644
--- a/web/app/docs/docs-nav.tsx
+++ b/web/app/docs/docs-nav.tsx
@@ -11,7 +11,7 @@ export function DocsNav({ children }: { children: React.ReactNode }) {
   const { open, toggle, close, drawerRef, buttonRef } = useMobileDrawer();
 
   return (
-    <div className="max-w-6xl mx-auto flex px-4">
+    <div className="max-w-6xl mx-auto flex px-0 md:px-4">
       {/* Mobile menu button */}
       <button
         ref={buttonRef}
@@ -62,8 +62,8 @@ export function DocsNav({ children }: { children: React.ReactNode }) {
       </aside>
 
       {/* Content */}
-      <main className="flex-1 min-w-0">
-        <div className="max-w-3xl px-6 pb-10 ml-0" data-dev="docs-content" style={{ paddingTop: 8 }}>
+      <main className="flex-1 min-w-0 overflow-x-hidden">
+        <div className="max-w-full px-6 pb-10 ml-0" data-dev="docs-content" style={{ paddingTop: 16 }}>
           <div className="docs-content text-[15px]">{children}</div>
           <DocsPager />
         </div>
diff --git a/web/app/globals.css b/web/app/globals.css
index a80da967..a10df622 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -159,6 +159,11 @@ body {
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
 }
 
+.docs-content pre {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
 .docs-content pre code {
   background: none;
   padding: 0;
diff --git a/web/app/page.tsx b/web/app/page.tsx
index eb78a272..a15bc106 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -256,6 +256,14 @@ export default function Home() {
           <DownloadButton location="bottom" />
           <GitHubButton />
         </div>
+        <div className="flex justify-center mt-6">
+          <a
+            href="/docs"
+            className="text-sm text-muted hover:text-foreground transition-colors underline underline-offset-2 decoration-border hover:decoration-foreground"
+          >
+            Read the Docs
+          </a>
+        </div>
 
       </main>