From 58e004e8e1177cf1a13162008444d982433b79c2 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Sun, 2 Aug 2026 09:19:50 -0500
Subject: [PATCH] fix(ui): variable width toc (#9062)

* fix(ui): variable width toc

* fixup!
---
 .changeset/tasty-toes-smile.md                              | 6 ++++++
 .../ui-components/src/Containers/Article/index.module.css   | 3 ++-
 .../ui-components/src/Containers/Footer/index.module.css    | 1 +
 .../ui-components/src/Containers/NavBar/index.module.css    | 1 +
 4 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tasty-toes-smile.md

diff --git a/.changeset/tasty-toes-smile.md b/.changeset/tasty-toes-smile.md
new file mode 100644
index 0000000000000..f302bf97f8591
--- /dev/null
+++ b/.changeset/tasty-toes-smile.md
@@ -0,0 +1,6 @@
+---
+'@node-core/ui-components': patch
+---
+
+Widen the article layout to 120rem on 3xl screens and give the extra space to the
+metabar, so table of contents entries no longer wrap.
diff --git a/packages/ui-components/src/Containers/Article/index.module.css b/packages/ui-components/src/Containers/Article/index.module.css
index 8d3dccdfd9a8f..0dd9ce4655dbe 100644
--- a/packages/ui-components/src/Containers/Article/index.module.css
+++ b/packages/ui-components/src/Containers/Article/index.module.css
@@ -7,7 +7,8 @@
     ml:grid-rows-[1fr]
     ml:overflow-visible
     ml:[grid-template-areas:'sidebar_main''sidebar_footer']
-    3xl:grid-cols-[--spacing(80)_1fr_--spacing(80)]
+    3xl:grid-cols-[--spacing(80)_1fr_--spacing(144)]
+    3xl:max-w-12xl
     mx-auto
     block
     w-full
diff --git a/packages/ui-components/src/Containers/Footer/index.module.css b/packages/ui-components/src/Containers/Footer/index.module.css
index 77b36eb06e26c..c285c5571f862 100644
--- a/packages/ui-components/src/Containers/Footer/index.module.css
+++ b/packages/ui-components/src/Containers/Footer/index.module.css
@@ -13,6 +13,7 @@
 
   .innerContainer {
     @apply max-w-10xl
+      3xl:max-w-12xl
       mx-auto
       flex
       flex-col
diff --git a/packages/ui-components/src/Containers/NavBar/index.module.css b/packages/ui-components/src/Containers/NavBar/index.module.css
index 78c1932d413c3..e445929b15c7e 100644
--- a/packages/ui-components/src/Containers/NavBar/index.module.css
+++ b/packages/ui-components/src/Containers/NavBar/index.module.css
@@ -11,6 +11,7 @@
 
   .innerContainer {
     @apply max-w-10xl
+      3xl:max-w-12xl
       xl:mx-auto
       xl:flex
       xl:h-16