Layout updates; widening content div, centering and responsiveness, scrollbar update

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 />
@@ -112,17 +113,50 @@ export function DocPage({
               {hasGithub && <GitHubCTA />}
             </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 toc: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">

src/components/sidebar/style.module.scss

@@ -2,12 +2,15 @@
   .sidebar.sidebar {
     --sidebar-item-bg-hover: var(--gray-a4);
     --sidebar-item-color: var(--accent);
+    /* Keep a darker background in dark mode */
+    background-color: var(--gray-1);
   }
 }
 .sidebar {
   --sidebar-item-bg-hover: var(--accent-purple-light);
   --sidebar-item-color: var(--accent-purple);
-  background-color: var(--gray-1);
+  /* Light mode: use pure white background */
+  background-color: #ffffff;
   top: var(--header-height);
   bottom: 0;
   flex-direction: column;
@@ -20,6 +23,32 @@
   height: 100vh;
   overflow-y: auto;
 
+  /* Minimal, accessible scrollbar styling */
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--gray-a6) transparent;
+
+  /* WebKit (Chrome, Edge, Safari) */
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--gray-a6);
+    border-radius: 9999px;
+    border: 2px solid transparent; /* creates inner padding for a lighter feel */
+    background-clip: content-box;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: var(--gray-a7);
+  }
+  &::-webkit-scrollbar-thumb:active {
+    background-color: var(--gray-a8);
+  }
+
   @media only screen and (min-width: 768px) {
     position: fixed;
     left: 0;

tailwind.config.mjs

@@ -58,6 +58,7 @@ export default {
       },
       screens: {
         'lg-xl': {min: '1130px'},
+        toc: '1490px',
       },
     },
   },