fix: prevent semver filter placeholder text from being truncated on s…

[iiio2]

On iPhone SE 2nd gen (375px width, iOS 14.6), the semver filter placeholder text "Filter by semver (e.g. ^3.0.0)" in the Versions section gets truncated/cut off because the input field doesn't have enough horizontal space. The input uses font-mono at text-xs (12px) and shares its row with an info icon, gap spacing, and padding — leaving insufficient room for the full placeholder on narrow viewports.

Fix: Added max-sm:placeholder:text-2xs class to the filter input in Versions.vue. This reduces the placeholder font size from 12px to 11px (text-2xs, defined in uno.config.ts) only on screens below the sm breakpoint. The typed text size remains at 12px, and wider screens are unaffected.

Before:

After:

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 8, 2026 4:21pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 8, 2026 4:21pm
npmx-lunaria	Ignored		Mar 8, 2026 4:21pm

[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: 1fc0c5c4-7e32-438d-a727-64e2aefe869d

📥 Commits

Reviewing files that changed from the base of the PR and between ed7f8f2 and 0a070a9.

📒 Files selected for processing (1)

• app/components/Package/Versions.vue

---

📝 Walkthrough

Walkthrough

This pull request introduces a single CSS class addition to the semver filter input element in the Package Versions component. The class max-sm:placeholder:text-2xs was added to adjust placeholder text sizing on small screens. The modification is purely styling-related with no changes to component logic, data flow, or error handling.

Possibly related PRs

• fix: add missing padding #1589: Modifies semver filter UI styling in the same component with placeholder and wrapper padding adjustments
• fix(ui): adjust sidebar versions spacing #1641: Updates semver filter input styling in the same component with similar Tailwind class refinements

Suggested reviewers

• danielroe
• alexdln

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the specific issue on iPhone SE 2nd gen with placeholder text truncation and details the CSS fix applied.

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

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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!

[alexdln]

@iiio2 This changed the size not from 12px to 11px, but from 16px to 11px - https://github.com/npmx-dev/npmx.dev/blob/main/app/assets/main.css#L313

In general, we now try to avoid sizes smaller than 14px. Ideally, all sizes should be 16px+

Also, it's not recommended to use different sizes for placeholders and inputs - it disrupts user experience

I think this is a copyright issue - maybe we don't need the description in parentheses since we have a tooltip. imo we need a separate label "Filter by Semver" and placeholder like "^3.0.0 or >= 1.4.2"

@knowler maybe you already know some option, since all the solutions here are mixed with a11y