Copy buttons for commands are missed on mobile

[alex-key]

Describe the bug

On Package page each command has a "Copy" button next to it. It is visible on hover state for the desktop version. But it is missed on mobile devices since there is no hover state.

Steps to reproduce:

• Use mobile device or emulator in your browser
• Go to https://npmx.dev/package/nuxt#get-started
• In section "GET STARTED" check no button is visible to copy commands
• Still copied if you click on command, but it's not intuitive

Additional context

[ackzell]

Hi @alex-key,

What is the expected behavior that is an acceptable fix for this?

While attempting to reproduce I noticed is that I can "tap" on the command on my mobile and I do get the copy button to appear. From there, I do get the command on the clipboard if I tap on the copy button.

Is the idea to always show the button for mobile?

[alex-key]

From my point on touchscreen device it should be always visible.
cc: @alexdln

[alexdln]

Another problem is that we don't have much space on mobile. But perhaps we could implement our standard behavior here as well: icon + text on desktop, and just the icon on mobile (and always show it)

[RevanthPrk]

I have fixed this issue.
On mobile devices (xs, sm, md screen sizes), it will now be displayed in this way.

In Desktop and laptop screens, it will remain as is

If this looks fine, then I will raise a PR @alex-key

[alex-key]

I think it's ok. Icon looks a but big to me, but let's keep it as it should be compatible with a11y requirements.
If there are any better options - we'll see during review

[RevanthPrk]

Sure, I will raise a PR now