fix(ui): keep compare header links inside their grid column by rohitg00 · Pull Request #2805 · npmx-dev/npmx.dev

rohitg00 · 2026-05-26T15:35:15Z

On the compare page, package headers like @agentmemory/agentmemory ran wider than their grid column and visibly overlapped both the sticky label cell on the left and the next package header on the right.

The header link in ComparisonGrid.vue was flex min-w-0 flex-col with no flex-1 / w-full, so it sized to its intrinsic content width and escaped the grid track. Adding flex-1 makes the link fill the available track width, which gives the inner line-clamp-1 spans a real width to clamp against. The existing min-w-0 already lets it shrink when the column is narrower than the name.

Repro URL: https://npmx.dev/compare?packages=@agentmemory/agentmemory,claude-mem,supermemory,mem0ai&layout=split

I also added a small regression test that mounts the grid with the four packages from the screenshot above and asserts the long-name header link carries flex-1 and min-w-0.

vercel · 2026-05-26T15:35:22Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	May 26, 2026 8:18pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	May 26, 2026 8:18pm
npmx-lunaria	Ignored		May 26, 2026 8:18pm

coderabbitai · 2026-05-26T15:35:30Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

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: 6eb202af-a089-433b-bc75-d17858593a10

📥 Commits

Reviewing files that changed from the base of the PR and between 8f56990 and f29eb4b.

📒 Files selected for processing (1)

test/nuxt/components/compare/ComparisonGrid.spec.ts

💤 Files with no reviewable changes (1)

test/nuxt/components/compare/ComparisonGrid.spec.ts

📝 Walkthrough

Summary by CodeRabbit

Bug Fixes
- Improved comparison grid header layout so long scoped package names and versions truncate correctly and no longer overflow their column.
Tests
- Updated tests to verify header anchors for long package names and versions use truncation and constrained layout to prevent overflow.

Walkthrough

Add flex-1 to package header LinkBase and change the visible name span to w-full truncate; update the header rendering test to assert .truncate elements for long package names.

Changes

Header link flex layout and overflow constraint

Layer / File(s)	Summary
Header link class update and tests `app/components/Compare/ComparisonGrid.vue`, `test/nuxt/components/compare/ComparisonGrid.spec.ts`	Add `flex-1` to the header link and change the visible name span to `w-full truncate`. Update the long-name header test to expect two `.truncate` parts and adjust the test description.

Suggested reviewers

alexdln

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main fix: adding flex-1 to the header link to keep it within grid column bounds, resolving the overflow issue.
Description check	✅ Passed	The description clearly relates to the changeset, explaining the overflow problem, root cause (missing flex-1), the solution, and rationale for using truncate instead of line-clamp-1.
Linked Issues check	✅ Passed	The PR fully addresses issue `#2802` by adding flex-1 to the LinkBase component to constrain header widths, switching to truncate for proper scoped-name visibility, and including a regression test.
Out of Scope Changes check	✅ Passed	All changes (flex-1 addition, truncate replacement, and test update) are directly scoped to fixing the comparison header overflow issue and have no unrelated modifications.

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

github-actions · 2026-05-26T15:35:45Z

Hello! Thank you for opening your first PR to npmx, @rohitg00! 🚀

Here’s what will happen next:

Our GitHub bots will run to check your changes.
If they spot any issues you will see some error messages on this PR.
Don’t hesitate to ask any questions if you’re not sure what these mean!
In a few minutes, you’ll be able to see a preview of your changes on Vercel
One or more of our maintainers will take a look and may ask you to make changes.
We try to be responsive, but don’t worry if this takes a few days.

codecov · 2026-05-26T15:38:53Z

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!

codecov · 2026-05-26T17:20:01Z

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!

graphieros

@rohitg00 Thank you for your PR :)

From what I can see, long package names still bleed, and the start of the name can also appear cropped in some cases:

I think using ellipsis for package names in the headers can be a good alternative (it is already used in other places in the compare page, inside the charts for example).

Replace break-words + line-clamp-1 with truncate (single-line ellipsis) on the package name and version spans, matching the pattern already used for chart labels in the same page. Previously, scoped names like @agentmemory/agentmemory broke at the '@' boundary so the scope prefix wrapped onto a second line that line-clamp-1 hid, making it look like the start of the name was cropped. Truncation keeps the start visible and ends in '…' when the name overflows.

rohitg00 · 2026-05-26T18:26:10Z

Thanks @graphieros — you're right, the previous fix didn't help with long names. Pushed 8f56990 to switch the name + version spans to truncate (single-line ellipsis), same pattern as the chart labels in this page.

Root cause of the cropped start in your screenshot: break-words was breaking the scope prefix at the @, pushing it onto a second line that line-clamp-1 then hid, so visually you only saw the tail. truncate keeps the start anchored and ends in … when it overflows the column.

gameroman · 2026-05-26T20:02:24Z

+    it('constrains the header link to its grid track so long scoped names cannot overflow', async () => {
+      const scopedName = '@scope/very-long-package-name'
+      const scopedVersion = '1.2.3'
+      const component = await mountSuspended(ComparisonGrid, {
+        props: {
+          columns: [
+            { name: scopedName, version: scopedVersion },
+            ...cols('pkg-b@1.0.0', 'pkg-c@1.0.0', 'pkg-d@1.0.0'),
+          ],
+        },
+      })
+
+      const link = component.find(`a[title="${scopedName}@${scopedVersion}"]`)
+      expect(link.exists()).toBe(true)
+      expect(link.classes()).toContain('flex-1')
+      expect(link.classes()).toContain('min-w-0')
    })


not sure this test makes sense

I agree, the css change is enough and does not require coverage in my opinion.

graphieros · 2026-05-26T20:09:00Z

@rohitg00

I suspect your previous answer (if not this PR) was generated by an agent.
It is important for the npmx team to have a 'people first' approach, and if we are ok with contributors using AI as a tool, the human connection is part of the essence of npmx.

Therefore I would be happy to merge your PR (probably without the test, if you were so kind to consider its removal), should you answer to this message in your own words.

rohitg00 · 2026-05-26T20:11:46Z

Hey! @graphieros Yeah, I use Agents a lot. I made this PR with Claude code, but I guided it and faced problem myself when I was comparing different memories with my agentmemory project.

Thanks, happy to help.

graphieros · 2026-05-26T20:12:35Z

@rohitg00

Thanks, and nice to meet you :)

graphieros

(see remarks regarding the test)

Per reviewer feedback: the CSS change covers the behavior; asserting on flex-1/min-w-0 class names doesn't add meaningful coverage.

rohitg00 · 2026-05-26T20:16:27Z

Agreed @gameroman @graphieros : dropped that test in f29eb4b. Kept only the title-attribute / render assertion.

graphieros

LGTM
Thank you for dropping the em dash in that last comment ;)

rohitg00 · 2026-05-26T20:23:30Z

LGTM Thank you for dropping the em dash in that last comment ;)

I hate emdashes.

fix(ui): keep compare header links inside their grid column

3260166

Merge branch 'main' into fix/comparison-header-overflow

07571c0

vercel Bot deployed to Preview – npmx.dev May 26, 2026 15:38 View deployment

test: use synthetic package names in comparison-grid overflow test

df930dc

vercel Bot deployed to Preview – npmx.dev May 26, 2026 16:44 View deployment

test: build scoped column directly to avoid splitting name on '@'

4788eae

vercel Bot deployed to Preview – npmx.dev May 26, 2026 17:19 View deployment

graphieros requested changes May 26, 2026

View reviewed changes

vercel Bot deployed to Preview – npmx.dev May 26, 2026 18:28 View deployment

rohitg00 requested a review from graphieros May 26, 2026 18:33

gameroman requested changes May 26, 2026

View reviewed changes

graphieros requested changes May 26, 2026

View reviewed changes

test: drop CSS-class-only assertion on scoped header link

f29eb4b

Per reviewer feedback: the CSS change covers the behavior; asserting on flex-1/min-w-0 class names doesn't add meaningful coverage.

vercel Bot deployed to Preview – npmx.dev May 26, 2026 20:18 View deployment

graphieros approved these changes May 26, 2026

View reviewed changes

graphieros requested a review from gameroman May 26, 2026 20:23

Uh oh!

Conversation

rohitg00 commented May 26, 2026

Uh oh!

vercel Bot commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Summary by CodeRabbit

Walkthrough

Changes

Suggested reviewers

Uh oh!

github-actions Bot commented May 26, 2026

Uh oh!

codecov Bot commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codecov Bot commented May 26, 2026

Codecov Report

Uh oh!

graphieros left a comment

Choose a reason for hiding this comment

Uh oh!

rohitg00 commented May 26, 2026

Uh oh!

gameroman May 26, 2026

Choose a reason for hiding this comment

Uh oh!

graphieros May 26, 2026

Choose a reason for hiding this comment

Uh oh!

graphieros commented May 26, 2026

Uh oh!

rohitg00 commented May 26, 2026

Uh oh!

graphieros commented May 26, 2026

Uh oh!

graphieros left a comment

Choose a reason for hiding this comment

Uh oh!

rohitg00 commented May 26, 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!

rohitg00 commented May 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel Bot commented May 26, 2026 •

edited

Loading

coderabbitai Bot commented May 26, 2026 •

edited

Loading

codecov Bot commented May 26, 2026 •

edited

Loading

rohitg00 commented May 26, 2026 •

edited

Loading