Dropdown menu in episodes queue shows below the episode description

[tmorgan497]

Describe the bug
Dropdown menu on episodes in the queue sometimes show below the episode description, causing the user to click on the episode instead of the menu item

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Queue'
2. Click on the more button (ellipsis-h)
3. Click on an item in the menu
   • If the episode under the menu is showing through, the user will actually click on the episode link instead of the menu item
4. See error

Expected behavior
The 'more' menu should be in front of the episode description or disallow click passthrough

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Firefox and Microsoft Edge
• Version: Firefox[118.0.2], Edge[118.0.2088.61]

Smartphone (please complete the following information):

• N/A

[mitchdowney]

@tmorgan497 oh I hadn't seen that. Hmm should be a simple CSS fix I think. I wonder why the issue happens on the Queue screen, but nowhere else on the website that use the same episode rows?

[tmorgan497]

Honestly, the queue page is the only place I've looked so far 🙃. I did peruse the codebase a bit to see if I could find a culprit but I'm not familiar with this framework. I've mainly dabbled in Vue.js and Django. I'll keep poking around and see if it occurs elsewhere.

[p4p4j0hn]

This only happens in the queue when the menu drops down from the elipsis, when it pops upward from the elipsis the component is in the foreground with an opaque background and all the buttons are selectable.

I couldn't find the issue in any other page than the queue.

[p4p4j0hn]

Dropdown is quite nested on the queue page. Probably why it gets clobbered a bit. No other page has the draggable list. That's the only difference I can see really. react-draggable-list might be affecting things.

I tried raising the z-index of the component. All the way up to 2000, but it still gets rendered behind the next list item when it drops down. If the item is near the bottom of the frame, the menu drops "up" and is in the foreground like it should be.