Clicking hashtag links scroll too far

[alanmels]

Description of the bug

With the Administration Bar module disabled clicking on such links you can see at least the part of the relevant content:

However, Backdrop comes with Administration Bar module enabled and it remains enabled on most of the websites, so clicking the same link takes you too far and you are not able to see relevant content at all. You would have to scroll little bit up to see the right content:

Expected behavior

Ideally, you should be able to see not only the part of the relevant content, but all of it including the title like so:

I see from various publications like, for example, https://css-tricks.com/hash-tag-links-padding/ it's a common browser issue. However, Backdrop's Administration Bar module is making it even worse. I am not sure what's the ideal solution here, so suggestions are welcome.

[olafgrabienski]

Good point! Inspired by the CSS tricks article, I've added the following styles via CSS Injector on top of the Seven theme of a test site. What do you think of it?

#permissions td.module:target {
  padding-top:51px;
  background: #ffe082;
}
.admin-bar #permissions td.module:target {
  padding-top:84px;
}

The background isn't necessary but helps with testing (and may even be a general enhancement).

[olafgrabienski]

Screenshot based on the CSS fix:

[indigoxela]

There's an alternate solution for that - scroll-margin-top:

.admin-bar :target {
  scroll-margin-top: 34px;
}

Browser support is good nowadays: https://caniuse.com/mdn-css_properties_scroll-margin-top

[alanmels]

I believe the solution should not be specifically for the Permissions page as the problem persists anywhere, take for example https://sandbox.ddev.site/admin/modules#module-comment. Not sure what's the ideal solution, but I really like @olafgrabienski's idea of making the target section outstanding by changing the background color.

I'm just afraid there would be too many css rules if we are to specify each possible target, so ideally some kind of universal solution for any link with anchor be found, maybe including a new jquery condition rule.

[olafgrabienski]

I believe the solution should not be specifically for the Permissions page ...

Agreed, a more general approach is preferable, but wouldn't work for the background. (The Permissions page seems however more important to me, as its anchors are linked from the Modules page's dropbuttons. Also, the background could be a follow-up.)

@indigoxela, unfortunately your (more general) approach with scroll-margin-top doesn't work for me, it doesn't change the position of the target element when I jump to it using an anchor link.