fix(a11y, ui): make copy commands buttons always visible

[IdrisGit]

There are two issues I am trying to solve in this PR:

1. Improve the discoverability of the copy command button.
2. Improve a11y by preventing flashes and button's position jumps when switching between commands or changing the package manager option.

I was confused where the copy button was and when I decided to highlight using cursor and copy manually that I saw the copy button popup.

screen recording of the issue and the fix

copy_button_compressed.mp4

side note: as a side effect it also fixes an issue on mobile where it's very hard to know where the copy command, since the opacity of the button changes based on the hover state.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 6, 2026 6:22am

2 Skipped Deployments

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

[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!

[coderabbitai]

📝 Walkthrough

Walkthrough

Copy buttons in Execute.vue, Install.vue and SkillsModal.vue were made permanently visible by removing opacity-0 and group-hover visibility classes, and their alignment was changed to use ms-auto. Button border classes were standardised (including border-solid) and hover styling simplified to affect text and border colour only. End-to-end tests were updated to assert persistent visibility for Create/Install commands and a new Run Command copy test was added that checks clipboard contents and copy confirmation behaviour.

Possibly related PRs

• fix: exclude copy selection in btns and tooltip of install #978: Modifies the same copy-button elements in Terminal/Install.vue, adjusting CSS classes and creating a direct code-level overlap.
• fix: correct package name copy tooltip hiding #838: Changes copy-button visibility/transition behaviour for terminal copy buttons, affecting the same UI concerns and class usage.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, addressing the visibility of copy command buttons across multiple components and test files.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 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: 1

🧹 Nitpick comments (2)

app/components/Terminal/Execute.vue (1)

71-74: Drop per-button focus-visible utility; rely on the global button focus style.

The inline focus-visible:outline-accent/70 on a <button> conflicts with the global focus-visible rule in app/assets/main.css. Please remove it to keep focus styling consistent.

Proposed change

-            class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+            class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95"

Based on learnings: focus-visible styling for buttons and selects is applied globally via main.css; avoid per-element focus-visible utility classes like focus-visible:outline-accent/70.

app/components/Terminal/Install.vue (1)

124-127: Remove per-button focus-visible utilities and rely on the global rule.

These three buttons still include focus-visible:outline-accent/70, which conflicts with the project’s global focus-visible styling in app/assets/main.css.

Proposed change

-            class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+            class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95"

-              class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+              class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95"

-              class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
+              class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95"

Based on learnings: focus-visible styling for buttons and selects is applied globally via main.css; avoid per-element focus-visible utility classes like focus-visible:outline-accent/70.

Also applies to: 186-189, 231-233

[coderabbitai]

Actionable comments posted: 1

[graphieros]

I like it. I just feel the eye has to travel from the button to its related content. How could this be mitigated ?

[IdrisGit]

I like it. I just feel the eye has to travel from the button to its related content. How could this be mitigated ?

@graphieros fair point, I think quick way would be to remove the right align and show the button in it's original place, later we can think about a better position or if you have any ideas.

[graphieros]

I think we need to know what others think.

The initial intention was to avoid cluttering the content.
Perhaps just a copy icon with a tooltip ?

[IdrisGit]

@graphieros yeah that makes sense, I will try with icons and post screenshots here

[IdrisGit]

Ok after trying few things and researching other platforms:

• I feel like the original solution is more consistent, since almost all docs website place copy button at end and users are trained to look there so it shouldn't be an issue.
• Tooltips themselves have issues and I don't like conveying important information using tooltips, imo they should only be used for optional details.
• We can get to this later if we observe any issues