pagetabs: breathing room for anchors (#1513)

Author: MykolaGolubyev

znai-docs/znai/release-notes/1.90/add-2026-04-19-page-tabs-page-headers-anchor.md

@@ -0,0 +1 @@
+* Add: [Page Tabs](layout/page-tabs) now have a breathing room for headers and footnotes below the tabs row

znai-reactjs/src/doc-elements/page/Page.css

@@ -1,4 +1,8 @@
 .page-content mark {
     background-color: var(--znai-search-preview-result-highlight-background-color);
     color: var(--znai-search-preview-result-highlight-color);
+}
+
+.page-content.with-page-tabs [id] {
+    scroll-margin-top: 32px;
 }

znai-reactjs/src/doc-elements/page/Page.jsx

@@ -35,21 +35,22 @@ class Page extends Component {
     const { tocItem } = this.props;
 
     const PageBottomPadding = pageTypesRegistry.pageBottomPaddingComponent(tocItem);
+    const tabIds = extractTabIds(this.props.content);
+    const className = "page-content" + (tabIds.length > 0 ? " with-page-tabs" : "");
 
     return (
       <React.Fragment>
-        <div className="page-content" ref={this.contentRootDomRef}>
-          {this.renderPageContent()}
+        <div className={className} ref={this.contentRootDomRef}>
+          {this.renderPageContent(tabIds)}
         </div>
         <PageBottomPadding />
       </React.Fragment>
     );
   }
 
-  renderPageContent() {
+  renderPageContent(tabIds) {
     const { tocItem } = this.props;
     const contentRootDom = this.contentRootDomRef.current;
-    const tabIds = extractTabIds(this.props.content);
 
     if (tabIds.length > 0) {
       return <PageTabsPageContent key={tocItem.pageTitle} {...this.props} tabIds={tabIds} contentRootDom={contentRootDom} />;

znai-reactjs/src/layout/DocumentationLayout.css

@@ -51,6 +51,8 @@
 
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
+
+    scroll-padding-top: 24px;
 }
 
 .znai-main-panel:focus {