style(aio): updated padding-right to h3 in _heading-anchors.scss

[haoRchen]

The h3 element is overflowing over its surrounding div element. Modified padding-left to align consistently with the remainder of div contents.

fixes: #22407

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] angular.io application / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: 22407

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[haoRchen]

In addition, I noticed that the header is not being aligned properly in mobile/responsive views. See below:

Please advise.

[gkalpak]

As mentioned by @petebacondarwin in #22407 (comment), the styles for <h3> are fine.

You should instead change the .heading-anchor styles in _heading-anchors.scss. More specifically, I think you should change this line:

padding-right: 24px;
padding-right: 64px;

(For reference, this was accidentally broken in e3e7044.)

[haoRchen]

I've applied your fix @gkalpak, please let me know if theres anything else I can do. See below for some updated screenshots:

[mary-poppins]

You can preview 5ee251e at https://pr22431-5ee251e.ngbuilds.io/.

[mary-poppins]

You can preview 8a429a6 at https://pr22431-8a429a6.ngbuilds.io/.

[seanprashad]

After looking further into other documentation with @haoRchen, we stumbled across another section in his patch mentioned above that has a formatting issue here:

It looks like the padding will need to be adjusted here also!

[haoRchen]

2dbbeaa addresses @SeanPrashad 's comment.

After fix screenshot:

[mary-poppins]

You can preview 2dbbeaa at https://pr22431-2dbbeaa.ngbuilds.io/.

[mary-poppins]

You can preview cde3dc1 at https://pr22431-cde3dc1.ngbuilds.io/.

[mary-poppins]

You can preview 6647bae at https://pr22431-6647bae.ngbuilds.io/.

[ngbot]

I see that you just added the PR action: merge label, but the following checks are still failing:
     conflicts with base branch "master"
     status "code-review/pullapprove" is pending

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}