Merge pull request #11932 from backstage/fix-sticky-header-overlap

[Techdocs] Fix sticky sidebars from overlapping other content in Entity Pages

.changeset/techdocs-sixty-mugs-hug.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Fix: When docs are shown in an entity page under the docs tab the sidebars start overlapping with the header and tabs in the page when you scroll the documentation content.

plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx

@@ -106,16 +106,18 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {
   return (
     <TechDocsReaderPageProvider entityRef={entityRef}>
       {({ metadata, entityMetadata, onReady }) => (
-        <Page themeId="documentation">
-          {children instanceof Function
-            ? children({
-                entityRef,
-                techdocsMetadataValue: metadata.value,
-                entityMetadataValue: entityMetadata.value,
-                onReady,
-              })
-            : children}
-        </Page>
+        <div className="techdocs-reader-page">
+          <Page themeId="documentation">
+            {children instanceof Function
+              ? children({
+                  entityRef,
+                  techdocsMetadataValue: metadata.value,
+                  entityMetadataValue: entityMetadata.value,
+                  onReady,
+                })
+              : children}
+          </Page>
+        </div>
       )}
     </TechDocsReaderPageProvider>
   );

plugins/techdocs/src/reader/components/TechDocsReaderPageContent/dom.tsx

@@ -81,9 +81,17 @@ export const useTechDocsReaderDom = (
       if (isMobileMedia) {
         element.style.top = '0px';
       } else {
-        const domTop = dom.getBoundingClientRect().top ?? 0;
+        const page = document?.querySelector('.techdocs-reader-page');
+        const pageTop = page?.getBoundingClientRect().top ?? 0;
+        let domTop = dom.getBoundingClientRect().top ?? 0;
+
         const tabs = dom.querySelector('.md-container > .md-tabs');
         const tabsHeight = tabs?.getBoundingClientRect().height ?? 0;
+
+        // the sidebars should not scroll beyond the total height of the header and tabs
+        if (domTop < pageTop) {
+          domTop = pageTop;
+        }
         element.style.top = `${Math.max(domTop, 0) + tabsHeight}px`;
       }