doc: fix inability to hover version-picker

[DmitryScaletta]

See this #34447 (comment)

Checklist

• documentation is changed or added
• commit message follows commit guidelines

[Trott]

/ping @nodejs/website

[willin]

LGTM

[juanarbol]

Thank you!

[lpinca]

No objections but I can't reproduce the issue on Firefox on Windows or Chrome/Safari on macOS.

[DmitryScaletta]

@lpinca
Steps to reproduce this bug:

1. Go to any page in docs (for example https://nodejs.org/api/fs.html)
2. Hover link "View another version"
3. Slowly move the cursor down

You can zoom the page up to 200% to see this bug for sure.

In some cases it looks fine.
It depends which font uses to render and which font is installed in the system from the font-family property.

[lpinca]

I don't have this issue. There is no space between the elements as shown in the issue description. See the screenshot attached below

[DmitryScaletta]

Hmm. Looks like there is a problem with fonts.
Different fonts renders differently and the current layout relies on one of them:

font-family: Lato, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;

Lato

Lucida Sans Unicode

Verdana

Tahoma

To fix that we need to set fixed height for the menu items.

After fix:

Lato

Lucida Sans Unicode

Verdana

Tahoma

There was also bug in the mobile version witch is also fixed:

[Trott]

Not opposing, but I too cannot replicate unless the width/text-size is such that the menu wraps. Chrome macOS

[richardlau]

I can reproduce on Firefox on Windows but only if my mouse cursor is to the right of the dropdown arrow (and left of the right edge of the drop down box).

[DmitryScaletta]

So I updated the code. See details here #34447 (comment)
Looks like it needs re-review.

[silverwind]

This seems like a huge hack overall. I'd suggest a rewrite to a <select> box. Besides the dropdown content, It can be made to look similar with a bit of CSS.

[jasnell]

Given the comment here and @silverwind's feedback, I've removed the author ready label.

[richardlau]

#34768 looks like an alternative solution.