Improve versions UI/UX/a11y

[alexdln]

• Adjust the left margin of the input so that it is in line with the rest of the content
• Increase the space between the tooltip and the input
• Increase click area for versions dropdown (chevron icon - add more vertical paddings and a bit horizontal with sth like px-1 -mx-1)

[alex-key]

@alexdln Also, probably, add proper cursor state on chevron hover.

[alexdln]

@alex-key For now, for consistency, we're sticking with the default cursor for buttons.

As soon as we come to a different solution, we'll update it everywhere

https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#cursor-and-navigation

[alex-key]

@alexdln Thankyou for sharing this instructions! Well, it says "A button is any element that operates an action (show tooltip, open menu, "like" package, open dropdown)" and I do not see how this chevron behavior different from dropdown behavior (this one below as an example), which uses pointer

Also "keyboard shorcuts" in the footer looks like a link (and uses pointer), but acts as a button (and it's actually button tag).

[alexdln]

For package manager, yes, there should be a default.

It's hard to tell about the footer, the footer probably needs to be redesigned to make it clear that it's not a link

[alex-key]

For package manager, yes, there should be a default.

It's hard to tell about the footer, the footer probably needs to be redesigned to make it clear that it's not a link

I agree, for me this footer link opening modal was unexpected when I clicked it for the first time

[MatteoGabriele]

@alexdln Which Chevron icon are you referring to? The versions block contains many of them, and I'm not sure whether you have a specific one in mind or if it's about all of them. (the section chevron and the individual versions chevron)

[alexdln]

@MatteoGabriele Almost all of them. The clickable area size should always be at least 32x32 if possible, to make it easy to hit with a tap