fix: pds page style bug

[RYGRIT]

🔗 Linked issue

🧭 Context

📚 Description

pds-page.mp4

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 13, 2026 11:21am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 13, 2026 11:21am
npmx-lunaria	Ignored		Mar 13, 2026 11:21am

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request replaces inline tooltip markup with a TooltipApp wrapper for avatar and contributor items and adds overflow-x-hidden to the root container. Tooltip text previously rendered inline (e.g. @username) is now provided via the TooltipApp component; contributor items no longer render the login text directly. No public exports or component APIs were changed; alterations are presentational and structural within templates and CSS only.

Possibly related PRs

• fix(ui): add missing AppTooltip usages #883 — also converts inline tooltip/title usage to the TooltipApp component.
• fix: display tooltips on focus for install size + create command #919 — likewise replaces inline tooltip markup with TooltipApp wrappers around interactive items.
• fix: add strategy to tooltip and use it in sticky elems #1330 — adds a strategy prop to Tooltip and applies strategy="fixed" to TooltipApp; relevant to tooltip rendering behaviour.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is entirely empty with no content explaining the changes, despite containing template sections.	The author should fill in the PR description with details about why the TooltipApp replacement was made, what tooltip clipping issues it resolves, and how it improves the user experience.

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

📝 Coding Plan

• Generate coding plan for human review comments

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[danielroe]

have you checked that tooltips display properly with this change?

[RYGRIT]

Sorry, the member list wasn't displayed in my local environment; I overlooked this. Thanks for pointing it out.

I'll fix it right away.

[RYGRIT]

@danielroe Are we willing to increase the left and right padding to solve this problem? 🤔 (But we still can't determine how long the user's name is) The current method causes tooltips to be truncated; I've seen a similar issue on the "About" page.

[danielroe]

I think for some reason this doesn't occur on the about page (at least to the left) 🤔

increasing padding doesn't look right

[RYGRIT]

I think for some reason this doesn't occur on the about page (at least to the left) 🤔

Perhaps it's because each contributor's username is relatively short.

However, when I visit npmx.dev, the "About" page also has a clipping issue because it adds "overflow-x-hidden" to the main box.
See video

about-page.mp4

[alexdln]

@RYGRIT can we use TooltipApp in both pages? It should update position automatically

[coderabbitai]

🧹 Nitpick comments (1)

app/pages/about.vue (1)

278-278: Consider removing class="block" to avoid conflicting display values.

TooltipBase's root element has class="inline-flex" (see app/components/Tooltip/Base.vue:47). Adding class="block" here merges both classes, resulting in conflicting CSS display properties. In this grid context (48px cells), it likely has no visual impact, but removing the redundant class would be cleaner.

🧹 Suggested simplification

-                <TooltipApp :text="`@${contributor.login}`" class="block" position="top">
+                <TooltipApp :text="`@${contributor.login}`" position="top">

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: de2db90e-8a05-4bc0-8ede-b9ea5f874a42

📥 Commits

Reviewing files that changed from the base of the PR and between fa9ab0c and 4168943.

📒 Files selected for processing (2)

• app/pages/about.vue
• app/pages/pds.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• app/pages/pds.vue

[alexdln]

We can 😅
Thanks for contribution🩵