From 24b1273297d1cd7d445f2b8acea54c1a77ea4ed3 Mon Sep 17 00:00:00 2001
From: sarah <129242944+sarah-inkeep@users.noreply.github.com>
Date: Fri, 24 Jul 2026 16:38:36 -0700
Subject: [PATCH] fix(docs): widen layout and cap reading column on large
 screens (#2925)

Set the Fumadocs docs layout to a 2000px band and give the article a
responsive max-width so text on wide screens sits in a centered reading
column with even side air instead of stretching edge-to-edge.

- --fd-layout-width 2000 / --fd-page-width 1714 so the content band fills
  the space after the sidebar (no floating gap; TOC pins to the right).
- --ok-content-width min(85%, 980px): proportional to the content region
  so it never butts the sidebar/TOC edges, capped at 980px.
- Only apply the cap above 2xl (1536px); below that the article fills the
  content area edge-to-edge, matching current prod on smaller screens.

GitOrigin-RevId: 0261c31b9710704678855caa9e5238e5d43ae0ca
---
 docs/src/app/global.css | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/docs/src/app/global.css b/docs/src/app/global.css
index 4a121cb43..717821fcd 100644
--- a/docs/src/app/global.css
+++ b/docs/src/app/global.css
@@ -95,12 +95,38 @@
 :root {
   --color-fd-primary: #3784ff;
   --color-fd-ring: #3784ff;
+  /* Wide layout that fills the screen, but the reading column is capped and
+     centered inside the content area (see #nd-page article below) so the text
+     keeps even breathing room on both sides instead of stretching edge-to-edge.
+     --fd-page-width fills the space after the sidebar (layout − 286px sidebar)
+     so the band doesn't float; the fixed TOC pins to its right edge. */
+  --fd-layout-width: 2000px;
+  --fd-page-width: 1714px;
+  /* Responsive reading measure: 85% of the content region (so it stays
+     proportional to the space left after the sidebar/TOC and never butts the
+     edges) capped at 980px on large screens (past which the side air grows,
+     not the text). Lower the % for more air on small screens; lower the px cap
+     to stop expanding sooner on large screens. */
+  --ok-content-width: min(85%, 980px);
 }
 .dark {
   --color-fd-primary: #69a3ff;
   --color-fd-ring: #69a3ff;
 }
 
+/* Cap the docs reading column so text doesn't span the full-width content area.
+   Fumadocs' <article> is w-full with md:mx-auto but no max-width; adding one
+   lets the existing auto margins center it, leaving even side air (the
+   "breathing room inside the content"). Tune via --ok-content-width above.
+
+   Only above 2xl (~1536px): below that, the article fills the content area
+   edge-to-edge (matching prod) rather than getting narrowed on smaller screens. */
+@media (min-width: 1536px) {
+  #nd-page article {
+    max-width: var(--ok-content-width);
+  }
+}
+
 .subtle-scrollbar {
   @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-fd-muted-foreground/30 dark:scrollbar-thumb-fd-muted-foreground/50;
 }