From 89d0a35cf7c4f973adffe24a3acd97cfd61c5913 Mon Sep 17 00:00:00 2001 From: Sarah Rambacher Date: Thu, 25 Sep 2025 14:56:32 -0400 Subject: [PATCH 1/6] fix(TOC): fixes toc showing incorrectly at exactly 1450px --- .../components/tableOfContents/tableOfContents.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-framework/components/tableOfContents/tableOfContents.css b/packages/documentation-framework/components/tableOfContents/tableOfContents.css index 9168912a2f..25d708afd8 100644 --- a/packages/documentation-framework/components/tableOfContents/tableOfContents.css +++ b/packages/documentation-framework/components/tableOfContents/tableOfContents.css @@ -46,7 +46,7 @@ display: none; } -@media (min-width: 1451px) { +@media (min-width: 1450px) { .ws-toc { width: 260px; max-height: calc(100vh - 76px); From 1b859f29a3e4eca0b08a215a1a9b65f570b12ba3 Mon Sep 17 00:00:00 2001 From: Sarah Rambacher Date: Fri, 26 Sep 2025 15:59:11 -0400 Subject: [PATCH 2/6] fix(TOC): tweak spacing and breakpoints --- .../components/tableOfContents/tableOfContents.css | 8 ++++---- .../components/tableOfContents/tableOfContents.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/documentation-framework/components/tableOfContents/tableOfContents.css b/packages/documentation-framework/components/tableOfContents/tableOfContents.css index 25d708afd8..4754ae2784 100644 --- a/packages/documentation-framework/components/tableOfContents/tableOfContents.css +++ b/packages/documentation-framework/components/tableOfContents/tableOfContents.css @@ -8,8 +8,8 @@ margin-block-end: var(--pf-t--global--spacer--md); margin-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) * -1); margin-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) * -2); - padding-block-start: var(--pf-t--global--spacer--md); - padding-block-end: var(--pf-t--global--spacer--md); + padding-block-start: var(--pf-t--global--spacer--sm); + padding-block-end: var(--pf-t--global--spacer--sm); padding-inline-start: var(--pf-t--global--spacer--md); padding-inline-end: 0; box-shadow: var(--pf-t--global--box-shadow--lg--bottom); @@ -24,7 +24,7 @@ } /* Mobile jumplinks */ -@media (max-width: 1450px) { +@media (max-width: 1449px) { .ws-toc.pf-m-expanded .pf-v6-c-jump-links__main { max-height: 65vh; overflow-y:auto; @@ -72,7 +72,7 @@ text-align: left; } -@media (min-width: 1451px) { +@media (min-width: 1450px) { .ws-toc .pf-v6-c-jump-links__main { margin-bottom: var(--jump-links-main-margin-bottom); } diff --git a/packages/documentation-framework/components/tableOfContents/tableOfContents.js b/packages/documentation-framework/components/tableOfContents/tableOfContents.js index 2a54047018..47fb9a66e2 100644 --- a/packages/documentation-framework/components/tableOfContents/tableOfContents.js +++ b/packages/documentation-framework/components/tableOfContents/tableOfContents.js @@ -96,7 +96,7 @@ export const TableOfContents = ({ items }) => { style={{ top: stickyNavHeight, '--jump-links-main-margin-bottom': `${stickyNavHeight}px` }} - offset={width > 1450 ? 108 + stickyNavHeight : 148 + stickyNavHeight} + offset={width < 768 ? 190 + stickyNavHeight : width > 1450 ? 88 + stickyNavHeight : 142 + stickyNavHeight} expandable={{ default: 'expandable', '2xl': 'nonExpandable' }} > {renderJumpLinksItems()} From c3ccbb090f9f8e18e8a76b2fd39e6813518a5dec Mon Sep 17 00:00:00 2001 From: Sarah Rambacher Date: Mon, 29 Sep 2025 10:47:01 -0400 Subject: [PATCH 3/6] fix(TOC): move nested ternary to a function --- .../components/tableOfContents/tableOfContents.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/documentation-framework/components/tableOfContents/tableOfContents.js b/packages/documentation-framework/components/tableOfContents/tableOfContents.js index 47fb9a66e2..6b125a4601 100644 --- a/packages/documentation-framework/components/tableOfContents/tableOfContents.js +++ b/packages/documentation-framework/components/tableOfContents/tableOfContents.js @@ -18,6 +18,17 @@ export const TableOfContents = ({ items }) => { const { innerWidth } = window; innerWidth !== width && setWidth(innerWidth); }; + + const getOffset = () => { + if (width >= 1450) { + return 88 + stickyNavHeight; + } else if (width >= 768) { + return 142 + stickyNavHeight; + } else { + return 190 + stickyNavHeight; + } + }; + let jumpLinksItems = []; let wasSublistRendered = false; @@ -96,7 +107,7 @@ export const TableOfContents = ({ items }) => { style={{ top: stickyNavHeight, '--jump-links-main-margin-bottom': `${stickyNavHeight}px` }} - offset={width < 768 ? 190 + stickyNavHeight : width > 1450 ? 88 + stickyNavHeight : 142 + stickyNavHeight} + offset={getOffset()} expandable={{ default: 'expandable', '2xl': 'nonExpandable' }} > {renderJumpLinksItems()} From 586fce44fb3ea2bc0a83bbfcc1dd1113223a353f Mon Sep 17 00:00:00 2001 From: Sarah Rambacher Date: Thu, 2 Oct 2025 13:46:41 -0400 Subject: [PATCH 4/6] fix(TOC): prevent TOC wrapping with better flex layout --- .../components/tableOfContents/tableOfContents.css | 1 - packages/documentation-framework/templates/mdx.css | 2 +- packages/documentation-framework/templates/mdx.js | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/documentation-framework/components/tableOfContents/tableOfContents.css b/packages/documentation-framework/components/tableOfContents/tableOfContents.css index 4754ae2784..0ad86c57ad 100644 --- a/packages/documentation-framework/components/tableOfContents/tableOfContents.css +++ b/packages/documentation-framework/components/tableOfContents/tableOfContents.css @@ -54,7 +54,6 @@ /* Hide TOC scrollbar IE, Edge & Firefox */ -ms-overflow-style: none; scrollbar-width: none; - order: 1; padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--2xl); flex-grow: 1; background: none; diff --git a/packages/documentation-framework/templates/mdx.css b/packages/documentation-framework/templates/mdx.css index 7530aa56d2..fbff51a47a 100644 --- a/packages/documentation-framework/templates/mdx.css +++ b/packages/documentation-framework/templates/mdx.css @@ -25,5 +25,5 @@ p.pf-v6-c-content--p.ws-p { } .ws-example-page-wrapper { - max-width: min(100%, 825px); + max-width: min(825px, 100%); } diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js index a4b51f43e3..6441a7bfbf 100644 --- a/packages/documentation-framework/templates/mdx.js +++ b/packages/documentation-framework/templates/mdx.js @@ -108,7 +108,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => { ); // Create dynamic component for @reach/router const ChildComponent = () => ( -
+
{toc.length > 1 && } {InlineAlerts} From 638e9c13dcbba90ce68bfc179931c379ac837025 Mon Sep 17 00:00:00 2001 From: Sarah Rambacher Date: Thu, 9 Oct 2025 09:38:01 -0400 Subject: [PATCH 5/6] fix(TOC): tweak width adjustments --- .../components/tableOfContents/tableOfContents.css | 9 ++++++--- packages/documentation-framework/templates/mdx.css | 4 +++- packages/documentation-framework/templates/mdx.js | 2 +- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/documentation-framework/components/tableOfContents/tableOfContents.css b/packages/documentation-framework/components/tableOfContents/tableOfContents.css index 0ad86c57ad..d0b387cff9 100644 --- a/packages/documentation-framework/components/tableOfContents/tableOfContents.css +++ b/packages/documentation-framework/components/tableOfContents/tableOfContents.css @@ -48,16 +48,19 @@ @media (min-width: 1450px) { .ws-toc { - width: 260px; + /* width: minmax(270px, 320px); */ + min-width: 150px; /* 270px; */ + max-width: 320px; max-height: calc(100vh - 76px); overflow-y: auto; /* Hide TOC scrollbar IE, Edge & Firefox */ -ms-overflow-style: none; scrollbar-width: none; - padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--2xl); - flex-grow: 1; + padding: 0 0 0 var(--pf-t--global--spacer--2xl); background: none; margin: 0; + order: 1; + flex: 1 1 320px; } .ws-toc, diff --git a/packages/documentation-framework/templates/mdx.css b/packages/documentation-framework/templates/mdx.css index fbff51a47a..bcab11dd8e 100644 --- a/packages/documentation-framework/templates/mdx.css +++ b/packages/documentation-framework/templates/mdx.css @@ -25,5 +25,7 @@ p.pf-v6-c-content--p.ws-p { } .ws-example-page-wrapper { - max-width: min(825px, 100%); + width: min(825px, 100%); + max-width: 1200px; + flex-grow: 2; } diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js index 6441a7bfbf..be50ce6a97 100644 --- a/packages/documentation-framework/templates/mdx.js +++ b/packages/documentation-framework/templates/mdx.js @@ -108,7 +108,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => { ); // Create dynamic component for @reach/router const ChildComponent = () => ( -
+
{toc.length > 1 && } {InlineAlerts} From 81137ac2d5cc495991053d4d57f39cd9a4e25fa6 Mon Sep 17 00:00:00 2001 From: Sarah Rambacher Date: Thu, 9 Oct 2025 11:34:59 -0400 Subject: [PATCH 6/6] fix(TOC): further tweak width adjustments --- .../components/tableOfContents/tableOfContents.css | 3 +-- packages/documentation-framework/templates/mdx.css | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/documentation-framework/components/tableOfContents/tableOfContents.css b/packages/documentation-framework/components/tableOfContents/tableOfContents.css index d0b387cff9..ca4b90b1df 100644 --- a/packages/documentation-framework/components/tableOfContents/tableOfContents.css +++ b/packages/documentation-framework/components/tableOfContents/tableOfContents.css @@ -48,8 +48,7 @@ @media (min-width: 1450px) { .ws-toc { - /* width: minmax(270px, 320px); */ - min-width: 150px; /* 270px; */ + min-width: 270px; max-width: 320px; max-height: calc(100vh - 76px); overflow-y: auto; diff --git a/packages/documentation-framework/templates/mdx.css b/packages/documentation-framework/templates/mdx.css index bcab11dd8e..097de563e6 100644 --- a/packages/documentation-framework/templates/mdx.css +++ b/packages/documentation-framework/templates/mdx.css @@ -25,7 +25,7 @@ p.pf-v6-c-content--p.ws-p { } .ws-example-page-wrapper { - width: min(825px, 100%); + min-width: 825px; max-width: 1200px; - flex-grow: 2; + flex-grow: 1; }