@patternfly/documentation-framework 6.27.2 → 6.27.3

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.27.3 (2025-10-13)
+
+
+### Bug Fixes
+
+* **TOC:** fixes toc showing incorrectly at exactly 1450px ([#4802](https://github.com/patternfly/patternfly-org/issues/4802)) ([de0c2b4](https://github.com/patternfly/patternfly-org/commit/de0c2b4d1428045b71c78e4a15b4162a86f9956d))
+
+
+
+
+
 ## 6.27.2 (2025-10-13)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/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);
   }

package/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()}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.27.2",
+  "version": "6.27.3",
   "author": "Red Hat",
   "license": "MIT",
   "bin": {
@@ -12,7 +12,7 @@
     "@babel/preset-env": "7.27.1",
     "@babel/preset-react": "^7.24.1",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.4.0-alpha.292",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.293",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "10.4.19",
     "babel-loader": "^9.1.3",
@@ -95,5 +95,5 @@
     "http-cache-semantics": ">=4.1.1",
     "nanoid": "3.3.8"
   },
-  "gitHead": "05eb1b66ed3b03750f270fdf204e9ee45f314915"
+  "gitHead": "b455d81018a53a3986a2dca9f12628d179fe8f7e"
 }

package/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;
 }

package/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}