fix(ui): invalid html button markup

[userquin]

Using div inside a button is invalid html markup (hydration missmatch issues).

I've been reviewing the button usages using div inside:

• @zeucapua review AccountMenu.client.vue
• @serhalp review PackageSelector.vue and VulnerabilityTree.vue
• @Flo0806 review DeprecatedTree.vue

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 9, 2026 1:27pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 9, 2026 1:27pm
npmx-lunaria	Ignored		Feb 9, 2026 1:27pm

[danielroe]

thank you!! 🫶

I'm working on hydration right now, and this is so helpful.

#1248

[codecov]

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/Compare/PackageSelector.vue	60.00%	1 Missing and 1 partial ⚠️
app/components/Package/DeprecatedTree.vue	50.00%	1 Missing ⚠️
app/components/Package/VulnerabilityTree.vue	66.66%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request changes block-level div wrappers to inline/inline-block span wrappers in four Vue components: app/components/Compare/PackageSelector.vue, app/components/Header/AccountMenu.client.vue, app/components/Package/DeprecatedTree.vue, and app/components/Package/VulnerabilityTree.vue. The edits adjust template element types and closing tags to alter DOM semantics and layout while preserving classes, conditional rendering, event handling, and data flow. No exported/public API signatures or component logic were modified.

Possibly related PRs

• feat: polish colors and indents #1042: Modifies app/components/Header/AccountMenu.client.vue template and styling — strong overlap at the same component/template level.

Suggested labels

front

Suggested reviewers

• serhalp

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description directly relates to the changeset, explaining the specific issue (invalid HTML markup with divs inside buttons) and listing the affected files with assigned reviewers.

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

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

app/components/Package/DeprecatedTree.vue (1)

56-61: HTML fix looks correct; consider removing redundant block class.

The conversion from div to span correctly resolves the invalid HTML markup inside the button. However, the block class is redundant when flex is already present—display: flex inherently creates a block-level container, so block has no effect.

🧹 Optional cleanup

- <span class="flex items-center gap-2 min-w-0 block">+ <span class="flex items-center gap-2 min-w-0">

---

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

[coderabbitai]

Actionable comments posted: 2

[userquin]

@danielroe can you apply coderabbitai suggestions? we may also need to add flex flex-col to some span at AccountMenu.client.vue