#2033 - Comment area covered by record name

[EthanW96]

Add scroll-margin-top property to comment-activity-section to offset the fixed header nav bar covering the comment area.

This css property has good browser coverage according to caniuse and csstricks suggests using it. I'm welcome to other suggestions though if alternatives exist I'm not aware of.

#2033

[corsacca]

Thanks @EthanW96 !

With 60px i get:

Changing scroll-margin-top to 160px seems better:

It might depend on the size of the top second nav bar?

[EthanW96]

Yeah it appears so. Do we want to overestimate at 160px (or a bit higher)? Or try something more programmatic?

[corsacca]

THanks @EthanW96 !
How does the 160px make it look for you? I'm assuming different browsers and sizes could be playing in to this.

[EthanW96]

@corsacca Yeah, so Chrome 119.0.6045.200 and Firefox 120.0.1 on my laptop using dev tools (425px wide) and my cell running Chrome 119.0.6045.193 on Android 13 all give me the same thing at 160px:

When the top second nav bar is shown on a device 320px or less I get a bit of overlap even at 160px. I emulated this using Chrome dev tools and setting the window width to a "Mobile S" device (320px wide) and even at 160px I get a bit of overlap:

Do we need a few breakpoints to resolve this properly? Are you finding 60px works for larger mobile devices?

[corsacca]

This is likely a browser thing instead of a screen size issue.
For 60px (this should be correct).
Using responsible dev tools and window resize i get on brave on mac:

Much better using firebox:

[corsacca]

Actually. On brave on a live website scroll-margin-top: 60px; works great. MIght just be my local dev.

[corsacca]

@EthanW96 lets go with the 60px version

[EthanW96]

@corsacca awesome! I've set it to 60px.

[corsacca]

Thank you @EthanW96!