Jumplinks with drawer demo was updated in https://github.com/patternfly/patternfly-react/pull/10993 but the offset is too small (doesn't include spacing around the breadcrumb or the page main container) so the scrolling & scrollspy causes the heading to scroll too far behind the toolbar drawer toggle.
This could be fixed by:
- Updating the breadcrumb selector to include the top padding:
`const breadcrumb = document.getElementsByClassName('pf-v6-c-page__main-breadcrumb')[0];`
- Adding the pf-v6-c-page__main-container margin-inline-start:
```
import c_page__main_container_MarginInlineStart from '@patternfly/react-tokens/dist/esm/c_page__main_container_MarginInlineStart';
const pageMargin = c_page__main_container_MarginInlineStart.value;
// multiply rems by fontsize to get px
const pageMarginPx = parseFloat(pageMargin) * parseFloat(getComputedStyle(document.documentElement).fontSize);
setOffsetHeight(masthead.offsetHeight + pageMarginPx + breadcrumb.offsetHeight + drawerToggleSection.offsetHeight);
```
Alternately, simply add the hasOverflowScroll prop to the headings/text page section and forget about calculating the offset:
Jumplinks with drawer demo was updated in https://github.com/patternfly/patternfly-react/pull/10993 but the offset is too small (doesn't include spacing around the breadcrumb or the page main container) so the scrolling & scrollspy causes the heading to scroll too far behind the toolbar drawer toggle.
This could be fixed by:
- Updating the breadcrumb selector to include the top padding: `const breadcrumb = document.getElementsByClassName('pf-v6-c-page__main-breadcrumb')[0];` - Adding the pf-v6-c-page__main-container margin-inline-start: ``` import c_page__main_container_MarginInlineStart from '@patternfly/react-tokens/dist/esm/c_page__main_container_MarginInlineStart'; const pageMargin = c_page__main_container_MarginInlineStart.value; // multiply rems by fontsize to get px const pageMarginPx = parseFloat(pageMargin) * parseFloat(getComputedStyle(document.documentElement).fontSize); setOffsetHeight(masthead.offsetHeight + pageMarginPx + breadcrumb.offsetHeight + drawerToggleSection.offsetHeight); ```Alternately, simply add the
hasOverflowScrollprop to the headings/text page section and forget about calculating the offset: