fix overlapping sidebar with tabs in techdocs (#6121)

Signed-off-by: Yousif Al-Raheem <yousifalraheem@gmail.com>

.changeset/metal-cycles-run.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Fix the overlapping between the sidebar and the tabs navigation when enabled in mkdocs (features: navigation.tabs)

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

@@ -64,9 +64,10 @@ export const Reader = ({ entityId, onReady }: Props) => {
 
   const updateSidebarPosition = useCallback(() => {
     if (!!shadowDomRef.current && !!sidebars) {
-      const mdTabs = shadowDomRef.current!.querySelector(
-        '.md-container > .md-tabs',
-      );
+      const shadowDiv: HTMLElement = shadowDomRef.current!;
+      const shadowRoot =
+        shadowDiv.shadowRoot || shadowDiv.attachShadow({ mode: 'open' });
+      const mdTabs = shadowRoot.querySelector('.md-container > .md-tabs');
       sidebars!.forEach(sidebar => {
         const newTop = Math.max(
           shadowDomRef.current!.getBoundingClientRect().top,