feat(layout): center content at standard widths and anchor sidenav/TOC at large screens\n\n- Center content column by default and cap width via CSS var\n- At >=2057px, anchor left sidenav and right TOC to content edges\n- Add 5rem side padding on large screens; keep top padding unchanged\n- No changes to step or separator components in this commit

Author: codyde

src/components/docPage/index.tsx

@@ -70,14 +70,15 @@ export function DocPage({
         <main className="main-content flex w-full mt-[var(--header-height)] flex-1 mx-auto">
           <div
             className={[
-              'mx-auto lg:mx-0 pt-6 px-6 prose dark:prose-invert max-w-full text-[var(--gray-12)] prose-a:no-underline hover:prose-a:underline',
+              'mx-auto pt-6 px-6 prose dark:prose-invert max-w-full text-[var(--gray-12)] prose-a:no-underline hover:prose-a:underline',
               'prose-code:font-normal prose-code:font-mono marker:text-[var(--accent)] prose-li:my-1',
               'prose-headings:mt-0 prose-headings:font-medium prose-headings:relative prose-headings:text-[var(--gray-12)]',
               'prose-blockquote:font-normal prose-blockquote:border-l-[3px] prose-em:font-normal prose-blockquote:text-[var(--gray-12)]',
               'prose-img:my-2',
               'prose-strong:text-[var(--gray-12)]',
-              fullWidth ? 'max-w-none w-full' : 'w-[75ch] xl:max-w-[calc(100%-250px)]',
+              fullWidth ? 'max-w-none w-full' : 'w-full',
             ].join(' ')}
+            id="doc-content"
           >
             <div className="mb-4">
               <Banner />
@@ -113,16 +114,50 @@ export function DocPage({
             </div>
           </div>
 
-          {hasToc && (
-            <aside className="sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden xl:block w-[250px]">
-              <div className="sidebar">
-                <SidebarTableOfContents />
-                <PlatformSdkDetail />
-              </div>
-            </aside>
-          )}
         </main>
+        {hasToc && (
+          <aside
+            data-layout-anchor="right"
+            className="sticky h-[calc(100vh-var(--header-height))] top-[var(--header-height)] overflow-y-auto hidden xl:block w-[250px]"
+          >
+            <div className="sidebar">
+              <SidebarTableOfContents />
+              <PlatformSdkDetail />
+            </div>
+          </aside>
+        )}
       </section>
+      <style>{`:root { --doc-content-w: 100ch; } #doc-content { max-width: var(--doc-content-w); }`}</style>
+      <style>{`
+        @media (min-width: 2057px) {
+          :root {
+            --doc-content-w: 100ch;
+            --toc-w: 250px;
+            --gap: 24px;
+          }
+          /* Cap content width and center (reinforced at this breakpoint) */
+          #doc-content {
+            max-width: var(--doc-content-w);
+            padding-left: 5rem; /* increase from px-6 (24px) to 5rem (80px) */
+            padding-right: 5rem;
+          }
+          /* Cancel default push so content can center */
+          [data-layout-anchor="left"] + .main-content {
+            margin-left: 0 !important;
+            width: 100% !important;
+          }
+          /* Anchor sidebars to content edges */
+          [data-layout-anchor="left"] {
+            left: calc(50% - (var(--doc-content-w) / 2) - var(--gap) - var(--sidebar-width));
+          }
+          [data-layout-anchor="right"] {
+            position: fixed !important;
+            left: calc(50% + (var(--doc-content-w) / 2) + var(--gap));
+            width: var(--toc-w);
+          }
+        }
+      `}</style>
+      
       <Mermaid />
       <ReaderDepthTracker />
     </div>

src/components/sidebar/index.tsx

@@ -81,7 +81,7 @@ export async function Sidebar({path, versions}: SidebarProps) {
       });
 
   return (
-    <aside className={`${styles.sidebar} py-3`}>
+    <aside className={`${styles.sidebar} py-3`} data-layout-anchor="left">
       <input type="checkbox" id={sidebarToggleId} className="hidden" />
       <style>{':root { --sidebar-width: 300px; }'}</style>
       <div className="md:flex flex-col items-stretch overflow-auto">