From 49e665e13a30f31d8314ab100547246d7c55c882 Mon Sep 17 00:00:00 2001 From: Parman Mohammadalizadeh Date: Sat, 31 Oct 2026 07:32:29 +0100 Subject: [PATCH] docs: keep anchored headings clear of the sticky section tabs The Overview/API/Styling/Examples tab nav is sticky at the top of the scroll container, so `scrollIntoView` from the table of contents and fragment links put the target heading underneath it. Give anchor targets in the component viewer a `scroll-margin-top` larger than the tab nav. Fixes #34038 --- docs/src/app/pages/component-viewer/component-viewer.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/src/app/pages/component-viewer/component-viewer.scss b/docs/src/app/pages/component-viewer/component-viewer.scss index 018c440ae0cc..d89c904eada7 100644 --- a/docs/src/app/pages/component-viewer/component-viewer.scss +++ b/docs/src/app/pages/component-viewer/component-viewer.scss @@ -43,6 +43,11 @@ app-component-viewer { position: relative; min-height: 500px; + // Keeps anchor targets from scrolling underneath the sticky section tabs. + [id] { + scroll-margin-top: 64px; + } + // Display outlet components with toc as flex and switch to // vertical direction on small screens component-overview,