Fix scroll issue within techdocs reader instead of adding special classes to entity page components

Signed-off-by: Raghunandan <soapraj@gmail.com>

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,25 +81,16 @@ export const useTechDocsReaderDom = (
       if (isMobileMedia) {
         element.style.top = '0px';
       } else {
+        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;
 
-        // When docs are shown in entity pages this method to reposition the sidebars on scroll
-        // do not consider the header and tabs.
-        const entityPageHeader = document.querySelector<HTMLElement>(
-          '.entity-page-header',
-        );
-        const entityPageTabs =
-          document.querySelector<HTMLElement>('.entity-page-tabs');
-        const entityPageHeaderTop =
-          entityPageHeader?.getBoundingClientRect().height ?? 0;
-        const entityPageTabsTop =
-          entityPageTabs?.getBoundingClientRect().height ?? 0;
-
         // the sidebars should not scroll beyond the total height of the header and tabs
-        if (domTop < entityPageHeaderTop + entityPageTabsTop) {
-          domTop = entityPageHeaderTop + entityPageTabsTop;
+        if (domTop < pageTop) {
+          domTop = pageTop;
         }
         element.style.top = `${Math.max(domTop, 0) + tabsHeight}px`;
       }