fix: preserve docs anchor offset#1282
Conversation
There was a problem hiding this comment.
Code Review
This pull request updates the global CSS to use the :where() pseudo-class for the [id] selector's scroll-margin-top, which lowers its specificity to allow for easier overrides by page-level utilities. Feedback suggests that the hardcoded 5rem value may not be suitable for all screen sizes and recommends using CSS variables or media queries to handle responsive header heights more effectively.
| /* Anchor scroll-margin so deep links land below the sticky nav. */ | ||
| [id] { scroll-margin-top: 5rem; } | ||
| /* Anchor fallback; page-level scroll-mt utilities should be able to override it. */ | ||
| :where([id]) { scroll-margin-top: 5rem; } |
There was a problem hiding this comment.
The hardcoded 5rem value for scroll-margin-top is applied globally across all screen sizes. Given that the repository already defines responsive adjustments for other elements (e.g., the ticker at line 339), the sticky header height likely changes on smaller viewports. This could result in section titles being partially hidden or having excessive gaps on mobile. Consider using a CSS variable or a media query to adjust this offset for different breakpoints.
Why
Docs page section anchors used Tailwind scroll-mt-32 so headings should land below the sticky nav, but the global id selector in globals.css has the same specificity and loads later. That reduced the effective scroll margin to 5rem, leaving section titles partially hidden after sidebar anchor navigation.
Fixes #1278.
What changed
Validation