Skip to content

fix: header(s) overlapping scrolled to element (toc)#1504

Open
WilcoSp wants to merge 2 commits intonpmx-dev:mainfrom
WilcoSp:fix/scrolling-toc
Open

fix: header(s) overlapping scrolled to element (toc)#1504
WilcoSp wants to merge 2 commits intonpmx-dev:mainfrom
WilcoSp:fix/scrolling-toc

Conversation

@WilcoSp
Copy link
Contributor

@WilcoSp WilcoSp commented Feb 14, 2026

When using table of content the scroll behaviour caused that the scrolled to element to be underneath the header(s). I've now added scroll margin to the scroll behaviour so that scrolled to element isn't any more underneath the header(s).

by default the margin is 70 but it's possible with definePageMeta to set a different scroll margin, at least right now the package, code & docs pages have different scroll margins due to their additional headers.

before:
afbeelding -> afbeelding

after:
afbeelding -> afbeelding


this will fix #1428

@vercel
Copy link

vercel bot commented Feb 14, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Feb 14, 2026 10:54am
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Feb 14, 2026 10:54am
npmx-lunaria Ignored Ignored Feb 14, 2026 10:54am

Request Review

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 14, 2026

📝 Walkthrough

Walkthrough

This pull request introduces scroll margin functionality across the application's routing system. Three page components are updated to define custom scroll margins via the definePageMeta function. The router configuration is enhanced to read these margins and apply them during hash-based scrolling navigation, with a fallback default of 70. A TypeScript module augmentation adds the scrollMargin property to the PageMeta interface, establishing the type definition for the feature.

Suggested reviewers

  • danielroe
🚥 Pre-merge checks | ✅ 2
✅ Passed checks (2 passed)
Check name Status Explanation
Merge Conflict Detection ✅ Passed ✅ No merge conflicts detected when merging into main
Description check ✅ Passed The pull request description clearly explains the problem (header overlap when scrolling to table of contents items) and describes the solution (adding configurable scroll margins to different pages).

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link

codecov bot commented Feb 14, 2026

Codecov Report

❌ Patch coverage is 0% with 3 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
app/router.options.ts 0.00% 3 Missing ⚠️

📢 Thoughts on this report? Let us know!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Scroll anchors disappear behind sticky header

1 participant