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

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

packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx

@@ -80,7 +80,6 @@ export function RoutedTabs(props: { routes: SubRoute[] }) {
         tabs={headerTabs}
         selectedIndex={index}
         onChange={onTabChange}
-        className="entity-page-tabs"
       />
       <Content>
         <Helmet title={route.title} />

packages/core-components/src/layout/Header/Header.tsx

@@ -113,7 +113,6 @@ type Props = {
   tooltip?: string;
   type?: string;
   typeLink?: string;
-  className?: string | '';
 };
 
 type TypeFragmentProps = {
@@ -209,7 +208,6 @@ export function Header(props: PropsWithChildren<Props>) {
     tooltip,
     type,
     typeLink,
-    className,
   } = props;
   const classes = useStyles();
   const configApi = useApi(configApiRef);
@@ -222,7 +220,7 @@ export function Header(props: PropsWithChildren<Props>) {
   return (
     <>
       <Helmet titleTemplate={titleTemplate} defaultTitle={defaultTitle} />
-      <header style={style} className={[classes.header, className].join(' ')}>
+      <header style={style} className={classes.header}>
         <Box className={classes.leftItemsBox}>
           <TypeFragment
             classes={classes}

packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx

@@ -67,7 +67,6 @@ type HeaderTabsProps = {
   tabs: Tab[];
   onChange?: (index: number) => void;
   selectedIndex?: number;
-  className?: string | '';
 };
 
 /**
@@ -77,7 +76,7 @@ type HeaderTabsProps = {
  *
  */
 export function HeaderTabs(props: HeaderTabsProps) {
-  const { tabs, onChange, selectedIndex, className } = props;
+  const { tabs, onChange, selectedIndex } = props;
   const [selectedTab, setSelectedTab] = useState<number>(selectedIndex ?? 0);
   const styles = useStyles();
 
@@ -105,7 +104,6 @@ export function HeaderTabs(props: HeaderTabsProps) {
         aria-label="scrollable auto tabs example"
         onChange={handleChange}
         value={selectedTab}
-        className={className}
       >
         {tabs.map((tab, index) => (
           <TabUI

plugins/catalog/src/components/EntityLayout/EntityLayout.tsx

@@ -241,7 +241,6 @@ export const EntityLayout = (props: EntityLayoutProps) => {
         title={<EntityLayoutTitle title={headerTitle} entity={entity!} />}
         pageTitleOverride={headerTitle}
         type={headerType}
-        className="entity-page-header"
       >
         {entity && (
           <>

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`;
       }