fix(TOC): fixes toc showing incorrectly at exactly 1450px (#4802)

Tweaked spacing/breakpoints and added better flex layout.

Author: srambach

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;
@@ -46,19 +46,20 @@
   display: none;
 }
 
-@media (min-width: 1451px) {
+@media (min-width: 1450px) {
   .ws-toc {
-    width: 260px;
+    min-width: 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;
-    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;
+    padding: 0 0 0 var(--pf-t--global--spacer--2xl);
     background: none;
     margin: 0;
+    order: 1;
+    flex: 1 1 320px;
   }
 
   .ws-toc,
@@ -72,7 +73,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);
   }

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 > 1450 ? 108 + stickyNavHeight : 148 + stickyNavHeight}
+      offset={getOffset()}
       expandable={{ default: 'expandable', '2xl': 'nonExpandable' }}
     >
       {renderJumpLinksItems()}

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(100%, 825px);
+  min-width: 825px;
+  max-width: 1200px;
+  flex-grow: 1;
 }

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 = () => (
-    <div className={source !== 'landing-pages' ? 'pf-v6-l-flex' : ''}>
+    <div className={source !== 'landing-pages' ? 'pf-v6-l-flex pf-v6-m-column pf-m-nowrap-on-2xl' : ''}>
       {toc.length > 1 && <TableOfContents items={toc} />}
       <Stack hasGutter className={(source !== 'landing-pages' && 'ws-example-page-wrapper')}>
         {InlineAlerts}