Headings have huge content areas, covering up interactive areas above them

[rschristian]

This is not a feature request.

Steps to Reproduce

Edit: This seems to not be reproducible on Chrome/Chromium. Not sure what others, but is reproducible on Firefox.

1. Navigate to https://webpack.js.org/plugins/terser-webpack-plugin/#options
2. Scroll to the bottom of the options table
3. Try to scroll the options table horizontally
4. Notice you cannot do it, because the next heading covers it.

Additional information

This seems to be site-wide, though the issue only pops up here and there.

[] I am willing to work on this issue and submit a pull request.

[chenxsan]

Unfortunately this is a workaround for the fixed navbar, otherwise when we click the header or access the header anchor, the header would be hidden under the fixed navbar.

You can check the documentation of React.js, should find same result.

[rschristian]

Ah, gotcha! Yep, that makes sense. However, portions of the site are unusable at the moment (usually with horizontal scrolls, so tables like this, code snippets, etc), so if there's no cross-browser solution, a different navbar setup might be needed?

React's documentation also having poor UX doesn't really help things here.

Edit: React's docs seem to have a ton of additional space to counteract this, while Webpack's doesn't. I haven't yet seen a spot in which this extra content spacing actually causes issues on React's site, though I did only just start browsing it.

[chenxsan]

I can confirm React doc has the same problem under firefox:

You can try to select the text from right to left, firefox won't let you do it while other browsers like Edge has no problem.

There're two options here:

1. use scroll-margin-top, however we can run into another problem under Safari
2. Do not use fixed header.

But I did notice that there's no problem on nextjs https://nextjs.org/docs/basic-features/font-optimization#usage. I'll see how to make it.

[chenxsan]

@rschristian Hi, can you check https://webpack-js-org-git-fork-chenxsan-bugfix-fix-467aee-webpack-docs.vercel.app/plugins/terser-webpack-plugin/#test? I've filed a pull request to workaround the problem. Will merge it once I clean up the code.

[rschristian]

@chenxsan Really sorry, notification got lost in my inbox.

That looks great, and fixes (as far as I can tell) every instance! Thank you! Really appreciate it.