Docs: refine docs layout to widen content area

src/css/custom.scss

@@ -88,6 +88,7 @@
   --normal-box-radius: 10px;
   --doc-sidebar-width: 280px;
   --docs-nav-margin: 60px;
+  --doc-toc-width: 288px;
 
   /* === Docusaurus / Infima overrides ========================== */
   --ifm-color-primary: var(--brand-orange-deep);
@@ -185,6 +186,14 @@
     --global-main-width: 100%;
   }
 }
+
+/* Docs pages need far more room than the marketing pages: the layout has to
+   fit the left sidebar, the TOC and the article itself. Let them use the whole
+   viewport (capped so lines stay readable on ultra-wide screens) instead of
+   the 1200px shared with the rest of the site. */
+html.docs-wrapper {
+  --global-main-width: min(100%, 1920px);
+}
 @media screen and (max-width: 1024px) {
   :root {
     --mobile-padding-width: 24px;

src/theme/DocItem/Layout/index.tsx

@@ -58,7 +58,11 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
           <DocItemPaginator />
         </div>
       </div>
-      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+      {docTOC.desktop && (
+        <div className={clsx('col col--3', styles.docTocCol)}>
+          {docTOC.desktop}
+        </div>
+      )}
     </div>
   );
 }

src/theme/DocItem/Layout/styles.module.css

@@ -3,13 +3,27 @@
   margin-top: 0;
 }
 
-@media (min-width: 1024px) {
+/* 1280px is where design-style.scss stops hiding the TOC column, so the two
+   have to agree. When they disagreed (1280 vs 1440), everything between those
+   two widths rendered the TOC alongside an article still claiming 100%, which
+   squeezed the TOC down to ~185px. */
+@media (min-width: 1280px) {
+  /* The TOC only needs a fixed column; every remaining pixel goes to the
+     article instead of being locked up in a percentage-based col--3. */
   .docItemCol {
-    max-width: 70% !important;
-    margin-right: 40px;
+    flex: 1 1 auto;
+    max-width: calc(100% - var(--doc-toc-width)) !important;
+    margin-right: 0;
+  }
+
+  /* !important: Infima's own .col--3 rule (flex: 0 0 25%) wins otherwise. */
+  .docTocCol {
+    flex: 0 0 var(--doc-toc-width) !important;
+    max-width: var(--doc-toc-width);
   }
 }
-@media screen and (max-width: 1440px) {
+/* Below 1280px the TOC is hidden, so the article spans the full width. */
+@media screen and (max-width: 1280px) {
   .docItemCol {
     max-width: calc(100%) !important;
     margin-right: 0;

src/theme/DocRoot/Layout/Main/styles.module.css

@@ -19,7 +19,7 @@
     ) !important;
   }
 }
-@media screen and (max-width: 1440px) {
+@media screen and (max-width: 1280px) {
   .docMainContainer {
     max-width: calc(
       100vw - var(--doc-sidebar-width) - var(--docs-nav-margin) - 140px

src/theme/DocRoot/Layout/styles.module.scss

@@ -12,10 +12,7 @@
 .docsWrapper {
   display: flex;
   flex: 1 0 auto;
-  @media screen and (min-width: 1600px) {
-    width: 1600px !important;
-    max-width: 1600px !important;
-  }
+  width: 100%;
   @media screen and (min-width: 1024px) {
     table {
       th {