From aefd54da6e2324e0f68b08f0a4371070479a260f Mon Sep 17 00:00:00 2001 From: Yousif Al-Raheem Date: Mon, 21 Jun 2021 12:40:48 +0200 Subject: [PATCH] fix overlapping sidebar with tabs in techdocs (#6121) Signed-off-by: Yousif Al-Raheem --- .changeset/metal-cycles-run.md | 5 +++++ plugins/techdocs/src/reader/components/Reader.tsx | 7 ++++--- 2 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 .changeset/metal-cycles-run.md diff --git a/.changeset/metal-cycles-run.md b/.changeset/metal-cycles-run.md new file mode 100644 index 0000000000..b4a2597aa2 --- /dev/null +++ b/.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) diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index ff297cf1af..68b575d728 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/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,