feat: versions page improvements by alexdln · Pull Request #2844 · npmx-dev/npmx.dev

alexdln · 2026-06-03T10:01:27Z

🔗 Linked issue

Resolves#2796

🧭 Context

Improvements for versions page:

Fix horizontal scroll on mobile
Increase text-size (text-xs instead of text-4xs/text-3xs for small elements)
Minor mobile improvements to keep all the data in a row
move versions filter field to versions history section so it's clear what it's for (see linked issue)

Screenshots

versions field before/after - https://npmx.dev/package/@types/node/versions

Mobile before/after - https://npmx.dev/package/@types/node/versions

vercel · 2026-06-03T10:01:33Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jun 3, 2026 2:04pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jun 3, 2026 2:04pm
npmx-lunaria	Ignored		Jun 3, 2026 2:04pm

coderabbitai · 2026-06-03T10:01:42Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 63071be7-1e5a-4c79-bdee-5800fdc8ea03

📥 Commits

Reviewing files that changed from the base of the PR and between 449e356 and 56fc57f.

📒 Files selected for processing (1)

app/pages/package/[[org]]/[name]/versions.vue

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

app/pages/package/[[org]]/[name]/versions.vue

📝 Walkthrough

Summary by CodeRabbit

Style
- Enhanced layout and spacing across package version sections.
- Improved responsive design for smaller screens.
- Refreshed styling for version tags and deprecated indicators.
- Better visibility of download information on the versions page.

Walkthrough

Template and class-based styling were refactored across Current Tags and Version History: Latest and Other tags cards were restyled, the Version History header now contains the filter, virtualised group headers and rows were restyled, and SSR-fallback rendering was updated and made null-safe.

Changes

Versions page styling and layout refactor

Layer / File(s)	Summary
Page header spacing tweak `app/pages/package/[[org]]/[name]/versions.vue`	The page header’s inner container gap class was tightened for smaller-screen spacing.
Current Tags – Latest card styling `app/pages/package/[[org]]/[name]/versions.vue`	Restyled the Latest tag card header and layout: responsive alignment changes, updated tag label list typography/spacing, restructured deprecated badge, changed downloads wrapper width/grid/alignment classes, and refined DateTime text styling.
Current Tags – Other tags list styling `app/pages/package/[[org]]/[name]/versions.vue`	Restyled Other tags rows: constrained tag-label container, tightened version-link width/truncation/overlay behaviour, updated deprecated badge markup/classes, adjusted downloads cell wrapper classes, and added explicit empty placeholder when downloads are absent while preserving existing aria/title generation for present downloads.
Version History section header restructuring `app/pages/package/[[org]]/[name]/versions.vue`	Rebuilt Version History header into a single flex row combining title and version count with the debounced filter input (including invalid-range tooltip wiring) and updated sizing classes.
Virtualised group-header rendering adjustments `app/pages/package/[[org]]/[name]/versions.vue`	Updated virtualised group headers: changed deprecated badge typography/structure, modified downloads column wrapper classes for present downloads, and render explicit empty placeholder when downloads are missing.
Virtualised version rows styling `app/pages/package/[[org]]/[name]/versions.vue`	Adjusted virtualised version rows: smaller tag-list typography, restyled deprecated badge, updated downloads wrapper classes for present downloads, retained downloads aria/title generation, and explicit placeholder for missing downloads.
SSR fallback group header styling and null-safety `app/pages/package/[[org]]/[name]/versions.vue`	Aligned SSR fallback group-header downloads wrapper and placeholder classes with virtualised rendering and made group-header date rendering null-safe by using a safe fallback for the first version.

Possibly related PRs

npmx-dev/npmx.dev#2530: Both PRs modify the versions component template and styling for the "Current Tags/Other versions" UI sections.

Suggested reviewers

ghostdevv
graphieros

🚥 Pre-merge checks | ✅ 2 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR addresses issue `#2796` regarding the versions page filter not working. However, the code changes shown focus on layout and styling refactoring rather than fixing the filter functionality itself, which was the primary objective of the linked issue.	Verify that the filter functionality has been implemented or fixed in the code changes. If the filter logic is handled elsewhere or in a separate commit, clarify how issue `#2796`'s core requirement is resolved.
Out of Scope Changes check	❓ Inconclusive	The changes are primarily scoped to the versions.vue file with layout, styling, and typography improvements that align with the PR objectives. The refactoring addresses the linked issue context around mobile UX and filter placement, though the core filter logic fix appears incomplete.	Confirm whether all necessary code changes to fix the filter functionality have been included, or if additional commits/changes are required to fully resolve issue `#2796`.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: versions page improvements' accurately summarizes the main change, which involves refactoring and improving the layout, styling, and functionality of the versions page.
Description check	✅ Passed	The description is directly related to the changeset, clearly detailing the improvements made to the versions page including horizontal scroll fixes, text sizing adjustments, mobile layout improvements, and filter field relocation.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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 · 2026-06-03T10:03:27Z

Codecov Report

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

Files with missing lines	Patch %	Lines
app/pages/package/[[org]]/[name]/versions.vue	83.33%	1 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/pages/package/`[[org]]/[name]/versions.vue:
- Around line 448-452: Remove the redundant bottom margin on the heading: in the
component containing the parent div with class "flex items-center
justify-between gap-2 mb-3" remove the "mb-3" utility from the child h2 element
(the <h2 class="text-sm text-fg-subtle uppercase mb-3"> that displays {{
$t('package.versions.page_title') }} and the version count) so only the
container controls the spacing.
- Line 541: Replace direct array index accesses of item.versions[0] with a
type-safe guarded access using optional chaining and nullish coalescing (e.g.
item.versions?.[0] ?? '') in the versions.vue component; update the occurrences
referenced (the span with :title="item.versions[0]" and the two uses at lines
noted in the review) to match the SSR fallback pattern already used around lines
709-710 so the UI never reads an out-of-range index.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9c8381bc-a993-45c4-9f78-2c42f8aa0b9a

📥 Commits

Reviewing files that changed from the base of the PR and between 4aed48b and 1d39d02.

📒 Files selected for processing (1)

app/pages/package/[[org]]/[name]/versions.vue

trueberryless · 2026-06-03T12:49:56Z

Could you please add a before/after screenshot?

alexdln · 2026-06-03T12:56:59Z

@trueberryless sure, done

trueberryless · 2026-06-03T13:07:11Z

Overall the changes look good to me, great visual improvements 🎊

I just noticed a small cut of because of the new column changes:

This was not happening before:

This might be because of edge cases with there are badges.

alexdln · 2026-06-03T14:07:54Z

@trueberryless I improved the sizes and made it so that on mobile devices it'll just display the badge for deprecated (with sr-only text). I think this will be enough to avoid big changes in the design, and perhaps we can try rethinking the grid for mobile devices (using two rows, shortening the numbers, etc.)

graphieros

LGTM 🌿

trueberryless

Amazing. Only showing the badge is a very clean responsive solution. I like it 👍

alexdln added 4 commits June 3, 2026 10:39

chore: increase text size on versions page
d76922c

fix: resolve horisontal scroll issue on mobile on versions page
cc61e06

fix: improve ui on mobile on versions page
64333ff

chore: move versions filter field to versions history section
1d39d02

alexdln changed the title ~~feat: versions improvements~~feat: versions page improvementsJun 3, 2026

vercelBotdeployed to Preview – npmx.dev June 3, 2026 10:03 View deployment

coderabbitaiBot reviewed Jun 3, 2026
View reviewed changes

Comment threadapp/pages/package/[[org]]/[name]/versions.vue Outdated
Comment threadapp/pages/package/[[org]]/[name]/versions.vue

chore: remove redundant indent
449e356

vercelBotdeployed to Preview – npmx.dev June 3, 2026 12:39 View deployment

trueberryless mentioned this pull request Jun 3, 2026
feat: hide stale tags and deprecated versions by default #2629
Open

chore: improve deprecated label on versions mobile
56fc57f

vercelBotdeployed to Preview – npmx.dev June 3, 2026 14:04 View deployment

graphieros approved these changes Jun 3, 2026
View reviewed changes

trueberryless approved these changes Jun 3, 2026
View reviewed changes

alexdln added this pull request to the merge queue Jun 3, 2026

Merged via the queue into npmx-dev:main with commit ebdbf0cJun 3, 2026
24 checks passed

alexdln deleted the feat/versions-improvements branch June 3, 2026 16:24

github-actionsBot mentioned this pull request Jun 3, 2026
chore: release v0.15.0 #2835
Merged

ayo-run pushed a commit to ayo-run/npmx.dev that referenced this pull request Aug 5, 2026
feat: versions page improvements (npmx-dev#2844)
56c5b25

Uh oh!

Uh oh!

Conversation

alexdln commented Jun 3, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

Uh oh!

vercelBot commented Jun 3, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitaiBot commented Jun 3, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Possibly related PRs

Suggested reviewers

❌ Failed checks (1 warning, 1 inconclusive)

Uh oh!

codecovBot commented Jun 3, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitaiBot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

trueberryless commented Jun 3, 2026

Uh oh!

alexdln commented Jun 3, 2026

Uh oh!

trueberryless commented Jun 3, 2026

Uh oh!

alexdln commented Jun 3, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

graphieros left a comment

Choose a reason for hiding this comment

Uh oh!

trueberryless left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alexdln commented Jun 3, 2026•
edited
Loading

vercelBot commented Jun 3, 2026•
edited
Loading

coderabbitaiBot commented Jun 3, 2026•
edited
Loading

codecovBot commented Jun 3, 2026•
edited
Loading

alexdln commented Jun 3, 2026•
edited
Loading