From 565b02c4867e3cad9a2f477d654dad90aabfa205 Mon Sep 17 00:00:00 2001
From: Lawrence Chen <54008264+lawrencecchen@users.noreply.github.com>
Date: Tue, 10 Feb 2026 16:00:18 -0800
Subject: [PATCH] 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.
---
 web/app/(legal)/layout.tsx         |  2 +-
 web/app/community/page.tsx         |  2 +-
 web/app/components/nav-links.tsx   |  2 --
 web/app/components/site-header.tsx | 21 ++++++++++++---------
 web/app/docs/docs-nav.tsx          |  4 ++--
 web/app/providers.tsx              |  2 +-
 6 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/web/app/(legal)/layout.tsx b/web/app/(legal)/layout.tsx
index fa8a1862..e8e828ad 100644
--- a/web/app/(legal)/layout.tsx
+++ b/web/app/(legal)/layout.tsx
@@ -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>
diff --git a/web/app/community/page.tsx b/web/app/community/page.tsx
index f0add642..15311689 100644
--- a/web/app/community/page.tsx
+++ b/web/app/community/page.tsx
@@ -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>
diff --git a/web/app/components/nav-links.tsx b/web/app/components/nav-links.tsx
index b19bcad9..116ceed3 100644
--- a/web/app/components/nav-links.tsx
+++ b/web/app/components/nav-links.tsx
@@ -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" />
     </>
   );
 }
diff --git a/web/app/components/site-header.tsx b/web/app/components/site-header.tsx
index e650dc33..05a5aa8b 100644
--- a/web/app/components/site-header.tsx
+++ b/web/app/components/site-header.tsx
@@ -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}
diff --git a/web/app/docs/docs-nav.tsx b/web/app/docs/docs-nav.tsx
index ce1b225f..30827c7d 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-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>
diff --git a/web/app/providers.tsx b/web/app/providers.tsx
index 267be8a4..acd83ac7 100644
--- a/web/app/providers.tsx
+++ b/web/app/providers.tsx
@@ -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>
   );