Widen page max-width and remove theme transition on change

Bump navbar, docs, legal, and community layouts from max-w-5xl to
max-w-6xl. Widen docs content from max-w-2xl to max-w-3xl. Home and
blog pages unchanged. Disable next-themes transition on change.
This commit is contained in:
Lawrence Chen 2026-02-10 16:00:18 -08:00
parent e28ed9309f
commit 565b02c486
6 changed files with 17 additions and 16 deletions

View file

@ -8,7 +8,7 @@ export default function LegalLayout({
return (
<div className="min-h-screen">
<SiteHeader />
<main className="w-full max-w-5xl mx-auto px-6 py-10">
<main className="w-full max-w-6xl mx-auto px-6 py-10">
<div className="docs-content text-[15px]">{children}</div>
</main>
</div>

View file

@ -44,7 +44,7 @@ export default function CommunityPage() {
return (
<div className="min-h-screen">
<SiteHeader section="community" />
<main className="w-full max-w-5xl mx-auto px-6 py-10">
<main className="w-full max-w-6xl mx-auto px-6 py-10">
<h1 className="text-2xl font-semibold tracking-tight mb-2">
Community
</h1>

View file

@ -1,5 +1,4 @@
import Link from "next/link";
import { DownloadButton } from "./download-button";
export function NavLinks() {
return (
@ -36,7 +35,6 @@ export function NavLinks() {
>
GitHub
</a>
<DownloadButton size="sm" />
</>
);
}

View file

@ -22,8 +22,9 @@ export function SiteHeader({
return (
<>
<header className="sticky top-0 z-30 w-full bg-background/80 backdrop-blur-sm">
<div className="w-full max-w-5xl mx-auto flex items-center justify-between px-6 h-12">
<div className="flex items-center gap-3">
<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">
{!hideLogo && (
<>
<Link href="/" className="flex items-center gap-2.5">
@ -48,15 +49,17 @@ export function SiteHeader({
)}
</div>
<div className="flex items-center gap-1">
{/* Desktop nav */}
<nav className="hidden md:flex items-center gap-4 text-sm text-muted">
<NavLinks />
</nav>
{/* Center: nav links */}
<nav className="hidden md:flex items-center justify-center gap-4 text-sm text-muted shrink-0">
<NavLinks />
</nav>
{/* Right: Download + theme + mobile */}
<div className="flex flex-1 items-center justify-end gap-1 min-w-0">
<div className="hidden md:block">
<DownloadButton size="sm" />
</div>
<ThemeToggle />
{/* Mobile hamburger */}
<MobileDrawerToggle
open={open}
onClick={toggle}

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-5xl mx-auto flex px-4">
<div className="max-w-6xl mx-auto flex px-4">
{/* Mobile menu button */}
<button
ref={buttonRef}
@ -63,7 +63,7 @@ export function DocsNav({ children }: { children: React.ReactNode }) {
{/* Content */}
<main className="flex-1 min-w-0">
<div className="max-w-2xl px-6 pb-10 ml-0" data-dev="docs-content" style={{ paddingTop: 8 }}>
<div className="max-w-3xl px-6 pb-10 ml-0" data-dev="docs-content" style={{ paddingTop: 8 }}>
<div className="docs-content text-[15px]">{children}</div>
<DocsPager />
</div>

View file

@ -4,7 +4,7 @@ import { ThemeProvider } from "next-themes";
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider attribute="class" defaultTheme="dark">
<ThemeProvider attribute="class" defaultTheme="dark" disableTransitionOnChange>
{children}
</ThemeProvider>
);