Unable to choose images on landing page, under content types on the search bar

[Ad-Mk]

Description

While selecting between all content, images, and audio. The selector does not highlight images, when hovered over it.

Reproduction

Please refer to the screen recording
Screen capture

Expectation

The image option should be highlighted, when the cursor hovers right over it.

Screenshots

Screen Capture - attaching for your reference

Environment

• Device: Laptops, Desktops
• OS: Windows 10
• Browser: Safari, Firefox

[aniash29-cr]

Tried to dig into this. Found out that the issue is related to z-index for <a> tag for the site logo.

On a screen resolution greater than 1024px when the logo and images element are stacked side by side - opening the content-type dropdown puts it over the logo.

Trying to hover over the Images button in the popover menu does not allow you to select and click it effectively due to the z-index value of the site logo anchor tag.

Please check the attached screenshot for reference:

[zackkrida]

Here's an additional screenshot that makes the z-index issue quite obvious:

[obulat]

This issue can be solved by removing z-10 class here:

openverse-frontend/src/pages/index.vue

Line 18 in 23b6862

class="relative z-10 hidden lg:block -left-[6.25rem] rtl:-right-[6.25rem]"

Is there a reason to set the z-index on the NuxtLink here?