Use <hr> instead of border-top in Migration headings

[doup]

Fixes a minor detail 😅. Right now Migration guides H3 headings have the border-top set. The problem is that when the user clicks on the sidebar links (or #) the scrolls aligns with the horizontal line because that's part of the heading.

The solution is to remove the border-top from the H3 heading and use <hr> instead, this way the scroll aligns with the text instead of the horizontal line.

Demo:

• First old behaviour
• Then this PR behaviour

migrations-extract-heading-hr.mp4

[rparrett]

Do we not have a GH issue documenting the known wonkiness of the sidebar?

( video over here: https://discord.com/channels/691052431525675048/695741366520512563/1298740373102792726 )

Anyhow, still seeing that issue on my end (chrome/macos), but I like this little detail.

[doup]

I saw that mentioned in Discord… but no idea if there is an GH issue.

I just checked, and it's working fine, but since we have a fixed header it feels weird (?). It probably gets fixed if we change the top part in rootMargin in the intersection observer. Probably needs the header height and that's it, which can be accessed with getComputedStyle(document.body).getPropertyValue('--header-height').

wonky-sidebar.mp4

[rparrett]

Cool, thanks for looking into that. Documented in separate issue.