Add special classes to identify entity page headers and tabs. Use that to make sure the sidebars in docs do not scroll beyond them

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

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

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

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

@@ -67,6 +67,7 @@ type HeaderTabsProps = {
   tabs: Tab[];
   onChange?: (index: number) => void;
   selectedIndex?: number;
+  className: string | '';
 };
 
 /**
@@ -76,7 +77,7 @@ type HeaderTabsProps = {
  *
  */
 export function HeaderTabs(props: HeaderTabsProps) {
-  const { tabs, onChange, selectedIndex } = props;
+  const { tabs, onChange, selectedIndex, className } = props;
   const [selectedTab, setSelectedTab] = useState<number>(selectedIndex ?? 0);
   const styles = useStyles();
 
@@ -104,6 +105,7 @@ 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,6 +241,7 @@ 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/TechDocsReaderPageContent/dom.tsx

@@ -81,9 +81,25 @@ export const useTechDocsReaderDom = (
       if (isMobileMedia) {
         element.style.top = '0px';
       } else {
-        const domTop = dom.getBoundingClientRect().top ?? 0;
+        // Docs shown in entity pages should consider the entity tabs and multiple paddings at the top
+        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;
+
+        let domTop = dom.getBoundingClientRect().top ?? 0;
         const tabs = dom.querySelector('.md-container > .md-tabs');
         const tabsHeight = tabs?.getBoundingClientRect().height ?? 0;
+
+        // In entity pages the sidebars should stop at the tabs
+        if (domTop < entityPageHeaderTop + entityPageTabsTop) {
+          domTop = entityPageHeaderTop + entityPageTabsTop;
+        }
         element.style.top = `${Math.max(domTop, 0) + tabsHeight}px`;
       }