[MannXo]

Summary

Anchor targets on component pages scroll underneath the sticky Overview/API/Styling/Examples tab nav. This gives them a scroll-margin-top so they land below it.

Context

The tab nav (.docs-component-viewer-tabbed-content.docs-sticky-top) is position: sticky; top: 0 inside the sidenav content, which is the scroll container. Table of contents links and fragment navigation call scrollIntoView(), which aligns the target with the top of that container, so the heading ends up behind the 49px tab bar.

Measured on the dialog overview page at 1455x800, after clicking "Keyboard interaction" in the table of contents:

	tab nav bottom	heading top
before	105px	55.5px (covered)
after	105px	119.5px

Changes

• docs/src/app/pages/component-viewer/component-viewer.scss: scroll-margin-top: 64px on elements with an id inside .docs-component-viewer-content. That covers headings and example viewers on every tab of a component page. Guide pages have no sticky top bar, so they are left alone.

Testing

• pnpm stylelint: 0 problems.
• pnpm ng-dev format changed --check <base>: all files correctly formatted.
• pnpm ng-dev commit-message validate-range <base> HEAD: valid.
• Compiled the file with the repo's sass. The output rule is .docs-component-viewer-content [id] { scroll-margin-top: 64px; }.
• I did not run the Bazel docs build or bazel test //docs/.... Serving the docs locally needs a full Bazel build of the workspace, so the before and after were checked on the deployed site with the compiled rule injected through Playwright.

Screenshots

Before

After

Notes for reviewers

• 64px is the 49px tab bar plus some breathing room. It could instead be tied to the tab height token if you prefer it derived.
• The alternative is scroll-padding-top on .mat-sidenav-content. That would also offset guide pages, which have no sticky bar, so I scoped it to the component viewer.

Fixes #34038

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.