From 7f71ccd263a4954fe116c9ff6b4a18696bd5616e Mon Sep 17 00:00:00 2001 From: Aviv Keller Date: Fri, 31 Jul 2026 09:09:42 -0700 Subject: [PATCH 1/2] fix(ui): variable width toc --- .changeset/tasty-toes-smile.md | 5 +++++ .../ui-components/src/Containers/Article/index.module.css | 3 ++- 2 files changed, 7 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..c1a13bd9c0f16 --- /dev/null +++ b/.changeset/tasty-toes-smile.md @@ -0,0 +1,5 @@ +--- +'@node-core/ui-components': patch +--- + +Use the available viewport width for article navigation on wide screens. diff --git a/packages/ui-components/src/Containers/Article/index.module.css b/packages/ui-components/src/Containers/Article/index.module.css index 8d3dccdfd9a8f..0f7b18afa1f04 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-[1fr_--spacing(256)_1fr] + 3xl:max-w-none mx-auto block w-full From 2430689de0a2f6ff0e2f6ac15609e1687cd8ef18 Mon Sep 17 00:00:00 2001 From: avivkeller Date: Sat, 1 Aug 2026 13:18:03 -0700 Subject: [PATCH 2/2] fixup! --- .changeset/tasty-toes-smile.md | 3 ++- .../ui-components/src/Containers/Article/index.module.css | 4 ++-- packages/ui-components/src/Containers/Footer/index.module.css | 1 + packages/ui-components/src/Containers/NavBar/index.module.css | 1 + 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/.changeset/tasty-toes-smile.md b/.changeset/tasty-toes-smile.md index c1a13bd9c0f16..f302bf97f8591 100644 --- a/.changeset/tasty-toes-smile.md +++ b/.changeset/tasty-toes-smile.md @@ -2,4 +2,5 @@ '@node-core/ui-components': patch --- -Use the available viewport width for article navigation on wide screens. +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 0f7b18afa1f04..0dd9ce4655dbe 100644 --- a/packages/ui-components/src/Containers/Article/index.module.css +++ b/packages/ui-components/src/Containers/Article/index.module.css @@ -7,8 +7,8 @@ ml:grid-rows-[1fr] ml:overflow-visible ml:[grid-template-areas:'sidebar_main''sidebar_footer'] - 3xl:grid-cols-[1fr_--spacing(256)_1fr] - 3xl:max-w-none + 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