Add scroll margin to headings for better alignment

[krassowski]

References

Fixes #15670

Code changes

Fixes a regression caught by visual tests in which after scrolling to a heading, the target heading was too close to the edge of the notebook (with no margin, and with the cell toolbar buttons cut off).

This regression was a result of a security-related PR fixing the ToC implementation, which meant that the fallback code path which was giving us extra padding was no longer used, see #15670 (comment) for details.

User-facing changes

The cell toolbar buttons are fully available after scrolling to a heading; the heading is easier to read as there is more margin.

Before security fix	After security fix	This PR

Backwards-incompatible changes

None

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[krassowski]

This needs to be backported to 4.0.x but without the test case because we kept the old behaviour of scrolling to the bottom of the cell in the 4.0.x backport of #15386 (so the tests are not failing on 4.0.x but users who toggle the setting on scroll behaviour would still see buttons being cut-off).

[krassowski]

CI is so green again 💚

[JasonWeill]

Change looks good, verified behavior in Chrome and Firefox ESR on macOS.

[krassowski]

@meeseeksdev please backport to 4.0.x

[lumberbot-app]

Owee, I'm MrMeeseeks, Look at me.

There seem to be a conflict, please backport manually. Here are approximate instructions:

1. Checkout backport branch and update it.

git checkout 4.0.x
git pull

2. Cherry pick the first parent branch of the this PR on top of the older branch:

git cherry-pick -x -m1 728c2b3ba948336972e401318651d9d0c3b87502

3. You will likely have some merge/cherry-pick conflict here, fix them and commit:

git commit -am 'Backport PR #15703: Add scroll margin to headings for better alignment'

4. Push to a named branch:

git push YOURFORK 4.0.x:auto-backport-of-pr-15703-on-4.0.x

5. Create a PR against branch 4.0.x, I would have named this PR:

"Backport PR #15703 on branch 4.0.x (Add scroll margin to headings for better alignment)"

And apply the correct labels and milestones.

Congratulations — you did some good work! Hopefully your backport PR will be tested by the continuous integration and merged soon!

Remember to remove the Still Needs Manual Backport label once the PR gets merged.

If these instructions are inaccurate, feel free to suggest an improvement.