From 26060a8294eb5b7f0cf6b83471071d595f301b1f Mon Sep 17 00:00:00 2001
From: Bruno Mercier Costa <94469565+emrcbrn@users.noreply.github.com>
Date: Thu, 22 Oct 2026 16:45:08 +0200
Subject: [PATCH] Center the docs layout on wide screens and raise body text to
 15px (#1060)

* docs: center the layout on wide screens and raise body text to 15px

The layout capped its width with max-w-8xl, which this Tailwind config
does not define, so the cap never applied. On screens wider than about
1660px the sidebar and header stayed at the viewport edges while the
text kept its max width, leaving a gap between the text and the table
of contents (about 350px at 1920, over 1000px at 2560).

Keep the sidebar, content and table of contents together in a 104rem
frame centered in the viewport. Below 104rem the layout is unchanged.

Raise the prose base font size from 14px to 15px, and h5/h6 with it so
they stay level with the body text.

* docs: center the layout frame without counting the scrollbar

100vw includes a classic vertical scrollbar, so the offset came out
half a scrollbar too large and the in-flow content ended 15px past the
fixed header. 100% resolves against the viewport without the scrollbar
for the fixed sidebar and header, and against the page width for the
content, so all three use the same exact offset.
---
 src/components/Header.jsx | 4 ++--
 src/components/Layout.jsx | 4 ++--
 src/styles/tailwind.css   | 6 ++++++
 typography.js             | 6 +++---
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index e23b967c..9c15dd13 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -37,9 +37,9 @@ export const Header = forwardRef(function Header({ className }, ref) {
       ref={ref}
         className={clsx(
           className,
-          'fixed inset-x-0 top-0 z-40 flex items-center justify-between gap-3 px-5 transition h-[64px] lg:left-72 lg:z-50 lg:px-8 xl:left-80 min-h-[64px] lg:pointer-events-auto',
+          'fixed inset-x-0 top-0 z-40 flex items-center justify-between gap-3 px-5 transition h-[64px] lg:left-[calc(var(--layout-offset)+18rem)] lg:right-[var(--layout-offset)] lg:z-50 lg:px-8 xl:left-[calc(var(--layout-offset)+20rem)] min-h-[64px] lg:pointer-events-auto',
           !isInsideMobileNavigation &&
-            'backdrop-blur-lg bg-white/70 dark:bg-[#181A1D]/95 lg:left-72 xl:left-80',
+            'backdrop-blur-lg bg-white/70 dark:bg-[#181A1D]/95',
           isInsideMobileNavigation &&
             'bg-white/70 dark:bg-[#181A1D]/95 backdrop-blur-lg'
         )}
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 4eefa80c..ba27e134 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -188,12 +188,12 @@ export function Layout({ children, title, tableOfContents }) {
       <AnnouncementBanner />
       <HeroPattern/>
       <div
-        className="relative mx-auto flex max-w-8xl md:px-2 lg:px-8 xl:px-12 lg:ml-72 xl:ml-80"
+        className="relative flex md:px-2 lg:px-8 xl:px-12 lg:ml-[calc(var(--layout-offset)+18rem)] lg:max-w-[calc(var(--layout-max-width)-18rem)] xl:ml-[calc(var(--layout-offset)+20rem)] xl:max-w-[calc(var(--layout-max-width)-20rem)]"
         style={{ paddingTop: bannerHeight }}
       >
         <header
             // layoutScroll
-            className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
+            className="contents lg:pointer-events-none lg:fixed lg:inset-y-0 lg:left-[var(--layout-offset)] lg:right-[var(--layout-offset)] lg:z-40 lg:flex"
             style={{ top: bannerHeight }}
         >
           <div className="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:dark:border-neutral-700/50 lg:px-6 lg:pb-8 lg:pt-4 lg:bg-white/70 lg:dark:bg-[#181A1D]/95 lg:backdrop-blur-lg xl:w-80 lg:overflow-x-visible sidebar-scroll">
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 8d9e330a..239aabd3 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -14,6 +14,12 @@
   --toastify-text-color-dark: theme('colors.zinc.600') !important;
   --toastify-color-light: theme('colors.white') !important;
   --toastify-text-color-light: theme('colors.zinc.600') !important;
+
+  /* Page frame: sidebar, content and table of contents stay together and the
+     frame is centered, so wide screens get empty space outside the page instead
+     of a gap between the content and the table of contents. */
+  --layout-max-width: 104rem;
+  --layout-offset: max(0px, calc((100% - var(--layout-max-width)) / 2));
 }
 
 /* Dark mode styles */
diff --git a/typography.js b/typography.js
index b5fa59c4..dbc9a345 100644
--- a/typography.js
+++ b/typography.js
@@ -43,7 +43,7 @@ module.exports = ({ theme }) => ({
 
       // Base
       color: 'var(--tw-prose-body)',
-      fontSize: theme('fontSize.sm')[0],
+      fontSize: '0.9375rem',
       lineHeight: theme('lineHeight.7'),
 
       // Layout
@@ -212,7 +212,7 @@ module.exports = ({ theme }) => ({
       },
       h5: {
         color: 'var(--tw-prose-headings)',
-        fontSize: theme('fontSize.sm')[0],
+        fontSize: '0.9375rem',
         ...theme('fontSize.sm')[1],
         fontWeight: '600',
         marginTop: theme('spacing.6'),
@@ -220,7 +220,7 @@ module.exports = ({ theme }) => ({
       },
       h6: {
         color: 'var(--tw-prose-headings)',
-        fontSize: theme('fontSize.sm')[0],
+        fontSize: '0.9375rem',
         ...theme('fontSize.sm')[1],
         fontWeight: '600',
         marginTop: theme('spacing.6'),