fix: fix cursor miss by kalu5 · Pull Request #1261 · npmx-dev/npmx.dev

kalu5 · 2026-02-09T08:37:09Z

Restore the return cursor and delete the cursor of the basic button.

…ton.

vercel · 2026-02-09T08:37:18Z

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 8:39am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 9, 2026 8:39am
npmx-lunaria	Ignored		Feb 9, 2026 8:39am

codecov · 2026-02-09T08:39:18Z

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!

coderabbitai · 2026-02-09T08:40:11Z

📝 Walkthrough

Walkthrough

This change refactors cursor-pointer utility class usage across button and interactive elements. The cursor-pointer class is removed from the Button/Base.vue component root styling, and instead added selectively to specific button instances in about.vue, compare.vue, privacy.vue, and settings.vue pages. Additionally, cursor-pointer is removed from a search provider select element in settings.vue. The net effect shifts cursor indication responsibility from the base button component level to individual page implementations.

Possibly related PRs

refactor: remove unnecessary prop from links #1247: Modifies class strings and presentational behaviour in Button/Base.vue
feat: use default cursor for non-link items #1216: Makes cursor-related class edits across components and pages including buttons and select elements
fix(ui): remove back button title on privacy page #1088: Modifies back-button styling in privacy.vue

Suggested reviewers

alexdln
danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description accurately describes the changeset, detailing the removal of cursor-pointer from the base button and its addition to specific page elements.

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

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

coderabbitai

Actionable comments posted: 4

coderabbitai · 2026-02-09T08:40:14Z

app/pages/about.vue

          <button
            type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
            @click="router.back()"


⚠️ Potential issue | 🟡 Minor

Remove per-button focus-visible utility (global rule already covers it).

The back button still carries focus-visible:outline-accent/70, but focus-visible styling for buttons is already applied globally.

Suggested change

- class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0" + class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"

Based on learnings: “In the npmx.dev project, ensure that focus-visible styling for button and select elements is implemented globally in app/assets/main.css … Do not apply per-element inline utility classes like focus-visible:outline-accent/70.”

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

<button

type="button"

class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"

class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"

@click="router.back()"

<button

type="button"

class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"

`@click`="router.back()"

coderabbitai · 2026-02-09T08:40:14Z

app/pages/compare.vue

          <button
            type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
            @click="router.back()"


⚠️ Potential issue | 🟡 Minor

Remove per-button focus-visible utility (global rule already covers it).

The back button still carries focus-visible:outline-accent/70, but focus-visible styling for buttons is already applied globally.

Suggested change

- class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0" + class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"

Based on learnings: “In the npmx.dev project, ensure that focus-visible styling for button and select elements is implemented globally in app/assets/main.css … Do not apply per-element inline utility classes like focus-visible:outline-accent/70.”

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

<button

type="button"

class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"

class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"

@click="router.back()"

<button

type="button"

class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"

`@click`="router.back()"

coderabbitai · 2026-02-09T08:40:14Z

app/pages/privacy.vue

          <button
            type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
            @click="router.back()"


⚠️ Potential issue | 🟡 Minor

Remove per-button focus-visible utility (global rule already covers it).

The back button still carries focus-visible:outline-accent/70, but focus-visible styling for buttons is already applied globally.

Suggested change

- class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0" + class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"

Based on learnings: “In the npmx.dev project, ensure that focus-visible styling for button and select elements is implemented globally in app/assets/main.css … Do not apply per-element inline utility classes like focus-visible:outline-accent/70.”

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

<button

type="button"

class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"

class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"

@click="router.back()"

<button

type="button"

class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"

`@click`="router.back()"

coderabbitai · 2026-02-09T08:40:14Z

app/pages/settings.vue

          <button
            type="button"
-            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"
+            class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"
            @click="router.back()"


⚠️ Potential issue | 🟡 Minor

Remove per-button focus-visible utility (global rule already covers it).

The back button still carries focus-visible:outline-accent/70, but focus-visible styling for buttons is already enforced globally. Please drop the inline utility to keep consistency.

Suggested change

- class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5" + class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0 p-1.5 -mx-1.5"

Based on learnings: “In the npmx.dev project, ensure that focus-visible styling for button and select elements is implemented globally in app/assets/main.css … Do not apply per-element inline utility classes like focus-visible:outline-accent/70.”

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

<button

type="button"

class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"

class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"

@click="router.back()"

<button

type="button"

class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0 p-1.5 -mx-1.5"

`@click`="router.back()"

kalu5 · 2026-02-09T08:46:45Z

I suggest adding the description of this problem to the contribution document to remind everyone to consider it when adding the cursor.
Also pay attention to this issue during the review to avoid style overwriting.
What do you think? @alexdln

kalu5 · 2026-02-09T08:49:26Z

I found that the default style of Vue Data UI also uses "pointer". I'll submit an issue first.

essenmitsosse · 2026-02-09T11:45:56Z

I think the consensus was that all clickable things should get cursor: pointer. You can still add cursor-pointer to the plain buttons that don't have it yet, but this will also be fixed once I replace them with the ButtonBase component.

kalu5 · 2026-02-09T13:08:30Z

I think the consensus was that all clickable things should get cursor: pointer. You can still add cursor-pointer to the plain buttons that don't have it yet, but this will also be fixed once I replace them with the ButtonBase component.

Something like this: It is agreed that all buttons should use a unified component, such as ButtonBase. This component uses the default style. You can also use cursor: pointer to make it a Link Button.

essenmitsosse · 2026-02-09T13:12:53Z

No I meant, also all buttons are supposed to just keep cursor-pointer. I think no one wanted an extra treatment for non-link buttons.

kalu5 · 2026-02-09T13:23:40Z

No I meant, also all buttons are supposed to just keep cursor-pointer. I think no one wanted an extra treatment for non-link buttons.

Here is a discussion. #1074

fix: restore the return cursor and delete the cursor of the basic but…

3360030

…ton.

vercel bot deployed to Preview – npmx.dev February 9, 2026 08:39 View deployment

coderabbitai bot reviewed Feb 9, 2026

View reviewed changes

Uh oh!

Conversation

kalu5 commented Feb 9, 2026

Uh oh!

vercel bot commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 9, 2026

Codecov Report

Uh oh!

coderabbitai bot commented Feb 9, 2026

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

kalu5 commented Feb 9, 2026

Uh oh!

kalu5 commented Feb 9, 2026

Uh oh!

essenmitsosse commented Feb 9, 2026

Uh oh!

kalu5 commented Feb 9, 2026

Uh oh!

essenmitsosse commented Feb 9, 2026

Uh oh!

kalu5 commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Feb 9, 2026 •

edited

Loading

kalu5 commented Feb 9, 2026 •

edited

Loading