docs(layout): widen content to 1200px and align header to combined layout width\n\n- Set to 1200px\n- Header max-width = sidebar + gap + content + gap + toc\n- Compensate asymmetry with translateX((toc - sidebar)/2)\n- Lock logo slot to sidebar width\n- Remove stray 24px padding and restore ~px-3 gutters across breakpoints

Author: codyde

src/components/docPage/index.tsx

@@ -126,11 +126,11 @@ export function DocPage({
           </aside>
         )}
       </section>
-      <style>{`:root { --doc-content-w: 100ch; } #doc-content { max-width: var(--doc-content-w); }`}</style>
+      <style>{`:root { --doc-content-w: 1200px; } #doc-content { max-width: var(--doc-content-w); }`}</style>
       <style>{`
         @media (min-width: 2057px) {
           :root {
-            --doc-content-w: 100ch;
+            --doc-content-w: 1200px;
             --toc-w: 250px;
             --gap: 24px;
           }

src/components/header.tsx

@@ -32,7 +32,7 @@ export function Header({
     <header className="bg-[var(--gray-1)] h-[var(--header-height)] w-full z-50 border-b border-[var(--gray-a3)] fixed top-0">
       {/* define a header-height variable for consumption by other components */}
       <style>{':root { --header-height: 80px; }'}</style>
-      <nav className="mx-auto px-6 lg:px-8 py-2 flex items-center">
+      <nav className="nav-inner mx-auto px-3 py-2 flex items-center">
         {pathname !== '/' && (
           <button className="lg:hidden mr-3">
             <label
@@ -53,7 +53,7 @@ export function Header({
         <Link
           href="/"
           title="Sentry error monitoring"
-          className="flex flex-shrink-0 items-center lg:w-[calc(var(--sidebar-width,300px)-2rem)] text-2xl font-medium text-[var(--foreground)]"
+          className="logo-slot flex flex-shrink-0 items-center lg:w-[calc(var(--sidebar-width,300px)-2rem)] text-2xl font-medium text-[var(--foreground)]"
         >
           <div className="h-full pb-[6px]">
             <Image
@@ -91,6 +91,32 @@ export function Header({
           <MobileMenu pathname={pathname} searchPlatforms={searchPlatforms} />
         </div>
       </nav>
+      <style>{`
+        /* Align header width with content + sidebars at wide screens */
+        @media (min-width: 2057px) {
+          header .nav-inner {
+            /* total layout width = sidebar + gap + content + gap + toc */
+            max-width: calc(
+              var(--sidebar-width, 300px)
+              + var(--gap, 24px)
+              + var(--doc-content-w, 1200px)
+              + var(--gap, 24px)
+              + var(--toc-w, 250px)
+            );
+            margin-left: auto;
+            margin-right: auto;
+            /* center, then compensate if sidebar != toc */
+            transform: translateX(calc((var(--toc-w, 250px) - var(--sidebar-width, 300px)) / 2));
+            /* restore small internal padding (≈ Tailwind px-3) */
+            padding-left: 0.75rem;
+            padding-right: 0.75rem;
+          }
+          /* Ensure the left logo area equals sidebar width */
+          header .nav-inner .logo-slot {
+            width: var(--sidebar-width, 300px);
+          }
+        }
+      `}</style>
     </header>
   );
 }