Skip to content

fix(ui): readme toc dropdown scroll to the selected item position - #1917

Merged
danielroe merged 2 commits into
npmx-dev:mainfrom
btea:feat/readme-toc-dropdown-scroll-to-active-item
Mar 4, 2026
Merged

fix(ui): readme toc dropdown scroll to the selected item position#1917
danielroe merged 2 commits into
npmx-dev:mainfrom
btea:feat/readme-toc-dropdown-scroll-to-active-item

Conversation

@btea

@bteabtea commented Mar 4, 2026

Copy link
Copy Markdown
Contributor

🔗 Linked issue

/

🧭 Context

npmx

📚 Description

When the ReadmeTocDropdown component's dropdown menu is opened, the default selected option should be moved to the viewport area for easier viewing and switching.

@vercel

vercelBot commented Mar 4, 2026

Copy link
Copy Markdown
Contributor

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

ProjectDeploymentActionsUpdated (UTC)
npmx.devReadyReadyPreview, CommentMar 4, 2026 8:40am
2 Skipped Deployments
ProjectDeploymentActionsUpdated (UTC)
docs.npmx.devIgnoredIgnoredPreviewMar 4, 2026 8:40am
npmx-lunariaIgnoredIgnoredMar 4, 2026 8:40am

Request Review

@coderabbitai

coderabbitaiBot commented Mar 4, 2026

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Walkthrough

The ReadmeTocDropdown.vue component is updated to improve dropdown item visibility. A new itemScrollIntoView() method is introduced that locates dropdown items and centres them in view. A watcher is added to the isOpen property that automatically triggers scrolling of the currently highlighted item when the dropdown opens, using post-flush timing to ensure scrolling occurs after DOM updates complete.

Suggested reviewers

  • graphieros
  • danielroe
🚥 Pre-merge checks | ✅ 1
✅ Passed checks (1 passed)
Check nameStatusExplanation
Description check✅ PassedThe PR description clearly relates to the changeset by explaining the purpose of the new scroll-to-view functionality in the ReadmeTocDropdown component.

✏️ 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

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

@codecov

codecovBot commented Mar 4, 2026

Copy link
Copy Markdown

Codecov Report

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

Files with missing linesPatch %Lines
app/components/ReadmeTocDropdown.vue33.33%3 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

@danielroedanielroe changed the title feat: readme toc dropdown scroll to the selected item positionfix(ui): readme toc dropdown scroll to the selected item positionMar 4, 2026
@danielroe
danielroe added this pull request to the merge queueMar 4, 2026
Merged via the queue into npmx-dev:main with commit f2045e6Mar 4, 2026
22 checks passed
@github-actionsgithub-actionsBot mentioned this pull request Mar 4, 2026
@btea
btea deleted the feat/readme-toc-dropdown-scroll-to-active-item branch March 7, 2026 13:46
Sign up for freeto 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.

2 participants

@btea@danielroe