Skip to content

fix: restore rows truncates in package page - #1240

Merged
danielroe merged 1 commit into
npmx-dev:mainfrom
alexdln:fix/package-page-truncates
Feb 8, 2026
Merged

fix: restore rows truncates in package page#1240
danielroe merged 1 commit into
npmx-dev:mainfrom
alexdln:fix/package-page-truncates

Conversation

@alexdln

@alexdlnalexdln commented Feb 8, 2026

Copy link
Copy Markdown
Member

There's a degradation on the packages page, causing some truncates to be lost.

Mostly, we simply forgot during the changes queue that it's necessary to specify "block" for truncate to work correctly. Some places got lost in the change. I checked that PRs and did a little searching - I think I've found all cases

There's also a slight downgrade in the icon - it's gotten too big and lost its indentation in the dependencies section. Fixed this too - it slightly messed up the component patterns, but I think we'll come back to work on the UI and update it there

@vercel

vercelBot commented Feb 8, 2026

Copy link
Copy Markdown
Contributor

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

ProjectDeploymentActionsUpdated (UTC)
npmx.devReadyReadyPreview, CommentFeb 8, 2026 9:56pm
2 Skipped Deployments
ProjectDeploymentActionsUpdated (UTC)
docs.npmx.devIgnoredIgnoredPreviewFeb 8, 2026 9:56pm
npmx-lunariaIgnoredIgnoredFeb 8, 2026 9:56pm

Request Review

@codecov

codecovBot commented Feb 8, 2026

Copy link
Copy Markdown

Codecov Report

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

Files with missing linesPatch %Lines
app/components/Package/Dependencies.vue50.00%2 Missing ⚠️

📢 Thoughts on this report? Let us know!

@coderabbitai

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Walkthrough

This PR introduces an iconSize prop to the Link Base component and standardises icon sizing across the package. The new prop accepts 'sm', 'md', or 'lg' values and maps to corresponding CSS classes via a computed property. Dependencies and Versions components are updated to utilise the new prop and adopt consistent block-level truncation classes. Template changes replace hard-coded icon sizing with the computed iconSizeClass, whilst preserving aria-hidden attributes. No functional logic modifications occur; changes focus on sizing flexibility and presentation consistency.

Possibly related PRs

Suggested reviewers

  • danielroe
🚥 Pre-merge checks | ✅ 1
✅ Passed checks (1 passed)
Check nameStatusExplanation
Description check✅ PassedThe pull request description clearly relates to the changeset, detailing the restoration of truncate classes and icon sizing fixes across package page components.

✏️ 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/Versions.vue (2)

709-719: Keep icon sizing consistent in expanded major-group rows.
Other version rows explicitly set icon-size="sm", but this expanded-group row still uses the default size, which can make warning icons appear larger.

Suggested tweak
<LinkBase
:to="versionRoute(v.version)"
class="text-xs block truncate"
:class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
:title="
v.deprecated
? $t('package.versions.deprecated_title', { version: v.version })
: v.version
"
:classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
+ icon-size="sm">

358-373: Update UnoCSS icon syntax to colon notation for better performance.

The warning icon uses dash syntax i-carbon-warning-hex, but colon syntax i-carbon:warning-hex is preferred. This alignment improves UnoCSS preset-icons resolution efficiency, particularly for long icon names, and matches the colon syntax already used elsewhere in this file (e.g., i-carbon:chevron-down, i-carbon:rotate-180).

Apply to all 6 occurrences in this file
- :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"+ :classicon="row.primaryVersion.deprecated ? 'i-carbon:warning-hex' : undefined"

Affects lines: 358–373, 416–427, 514–529, 586–606, 648–668, 709–719


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

@danielroe
danielroe added this pull request to the merge queueFeb 8, 2026
Merged via the queue into npmx-dev:main with commit 9a0521cFeb 8, 2026
18 checks passed
@alexdln
alexdln deleted the fix/package-page-truncates branch February 8, 2026 22:27
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@alexdln@danielroe