feat(ui): show maintainers avatars

[bluwy]

🔗 Linked issue

n/a

🧭 Context

I think it would be nice if the maintainers section showed the avatars.

It seems from #435 we're ok with displaying the avatar, but it was only implemented in the user/org pages.

📚 Description

[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 3:42am

2 Skipped Deployments

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 04999747-2f84-4b70-8c36-ebfd16940741

📥 Commits

Reviewing files that changed from the base of the PR and between 4260601 and 1d310bf.

📒 Files selected for processing (2)

• app/components/Package/Maintainers.vue
• test/nuxt/a11y.spec.ts

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

• app/components/Package/Maintainers.vue
• test/nuxt/a11y.spec.ts

---

📝 Walkthrough

Walkthrough

UI changes: Avatar component adds a public size prop ('xs' | 'lg') with computed helpers (sizePixels, sizeClass, textClass) and dynamic sizing. Maintainers view now renders a UserAvatar (size="xs") before maintainer names. Two user pages (~[username]/index.vue, ~[username]/orgs.vue) render UserAvatar with size="lg". Tests updated to include size: 'lg' in three accessibility specs and a new test verifies accessibility for sizes ['xs','lg']. No data loading, access calculations, or control-flow changes.

Suggested labels

a11y

Suggested reviewers

• danielroe
• alexdln

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, describing the addition of avatars to the maintainers section with relevant context and visual documentation.

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

Tip

CodeRabbit can use TruffleHog to scan for secrets in your code with verification capabilities.

Add a TruffleHog config file (e.g. trufflehog-config.yml, trufflehog.yml) to your project to customize detectors and scanning behavior. The tool runs only when a config file is present.

[bluwy]

I couldn't figure out how to remove the underline style if wrapped in an anchor tag, so I used an SVG here. Seems like you need block or inline-block in order to override it, but the parent div is a flex which seems to make anything under not work.

[coderabbitai]

Actionable comments posted: 2

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 812011a8-23c3-45be-9c32-904fbc5a5f41

📥 Commits

Reviewing files that changed from the base of the PR and between d2744e7 and ba54e09.

📒 Files selected for processing (2)

• app/components/Package/Maintainers.vue
• app/components/User/Avatar.vue

[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!

[coderabbitai]

🧹 Nitpick comments (1)

test/nuxt/a11y.spec.ts (1)

2854-2878: Consider adding accessibility tests for size: 'xs'.

All three UserAvatar tests now use size: 'lg', but the xs variant is also used in the codebase (e.g., in the maintainers section). Adding at least one test with size: 'xs' would ensure both size variants are covered by accessibility audits.

🧪 Suggested addition for xs size coverage

+    it('should have no accessibility violations with xs size', async () => {
+      const component = await mountSuspended(UserAvatar, {
+        props: { username: 'testuser', size: 'xs' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(UserAvatar, {
         props: { username: 'testuser', size: 'lg' },

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a55b1986-1c31-4e7f-b07f-4fec3efc6b35

📥 Commits

Reviewing files that changed from the base of the PR and between ba54e09 and 4260601.

📒 Files selected for processing (1)

• test/nuxt/a11y.spec.ts