fix(ui): variable width toc (#9062)

* fix(ui): variable width toc

* fixup!

Author: avivkeller

.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.

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

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

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