Skip to content

fix: hard-code scroll margin per-page to account for fixed header size #1504

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielroe merged 4 commits into from
Feb 22, 2026
Merged

fix: hard-code scroll margin per-page to account for fixed header size #1504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cfa5cb7
fix: adding scroll margin to prevent header being over the scrolled t…
WilcoSp Feb 14, 2026
65bc489
[autofix.ci] apply automated fixes
autofix-ci[bot] Feb 14, 2026
46bccb6
Merge branch 'npmx-dev:main' into fix/scrolling-toc
WilcoSp Feb 22, 2026
06d2418
moved adding scrollMargin to PageMeta interface to the index file ins…
WilcoSp Feb 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ definePageMeta({
'/package/code/:packageName/v/:version/:filePath(.*)?',
// '/code/@:org?/:packageName/v/:version/:filePath(.*)?',
],
scrollMargin: 160,
})
const route = useRoute('code')
Expand Down
1 change: 1 addition & 0 deletions app/pages/package-docs/[...path].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ definePageMeta({
name: 'docs',
path: '/package-docs/:path+',
alias: ['/package/docs/:path+', '/docs/:path+'],
scrollMargin: 180,
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# Check the actual file and verify line 10 content
cat -n app/pages/package-docs/[...path].vue | head -20

Repository: npmx-dev/npmx.dev

Length of output: 781

🏁 Script executed:

# Check router.options.ts implementation
fd 'router.options.ts' --exec cat {} \;

Repository: npmx-dev/npmx.dev

Length of output: 680

🏁 Script executed:

# Verify CSS values in the Vue component, specifically around lines 273-275
cat -n app/pages/package-docs/[...path].vue | sed -n '270,280p'

Repository: npmx-dev/npmx.dev

Length of output: 379

🏁 Script executed:

# Search for scroll-related CSS or scroll-mt values in the file
rg 'scroll-m|scroll-margin' app/pages/package-docs/[...path].vue

Repository: npmx-dev/npmx.dev

Length of output: 83

Align scrollMargin: 180 with CSS scroll-mt-32 (128 px) for consistent scroll positioning

Direct URL navigation with a hash anchor applies the CSS scroll-mt-32 rule (128 px), whereas router-driven navigation (e.g., clicking a TOC link) uses the scrollMargin: 180 offset. This 52 px difference results in inconsistent scroll positions depending on the navigation path, affecting user experience. Align both values to ensure the symbol lands at the same vertical position regardless of how the user reaches it.

})

const route = useRoute('docs')
Expand Down
1 change: 1 addition & 0 deletions app/pages/package/[[org]]/[name]/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
// stub page to help with paths
definePageMeta({
name: 'package',
scrollMargin: 150,
})
</script>

Expand Down
9 changes: 7 additions & 2 deletions app/router.options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,18 @@ import type { RouterConfig } from 'nuxt/schema'
export default {
scrollBehavior(to, _from, savedPosition) {
// If the browser has a saved position (e.g. back/forward navigation), restore it

if (savedPosition) {
return savedPosition
}

// If navigating to a hash anchor, scroll to it
if (to.hash) {
return { el: to.hash, behavior: 'smooth' }
const { scrollMargin } = to.meta
return {
el: to.hash,
behavior: 'smooth',
top: typeof scrollMargin == 'number' ? scrollMargin : 70,
}
}

// Otherwise, scroll to the top of the page
Expand Down
12 changes: 12 additions & 0 deletions app/types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,14 @@
import '#app'
import '#vue-router'
export * from './icon'
export * from './navigation'

declare module '#app' {
interface PageMeta {
/**
* top margin in pixels for scrolling to an element
* @default 70
*/
scrollMargin?: number
}
}
Loading