marketing-shibata50/cmux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Read the Docs link below bottom CTA on homepage (#411)

Browse source 
* 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
This commit is contained in:
Lawrence Chen 2026-02-23 20:09:44 -08:00 • committed by GitHub
parent 3c1650d3e0
commit f502f84144
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 17 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/app/components/site-header.tsx
View file

@ -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">

6
web/app/docs/docs-nav.tsx
View file

@ -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>

5
web/app/globals.css
View file

@ -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;

8
web/app/page.tsx
View file

@ -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>