Fix Album context menu moves behind adjacent album entries

[Yi-Wang126]

Description

This PR addresses the implementation of a context menu for the Card component, as discussed in Issue 1673. The new functionality allows users to interact with the card via a dropdown menu that appears upon hover, improving usability and accessibility.

Changes Made

1. Added Context Menu Functionality:

   • Introduced a state management system to handle the visibility of the context menu on mouse enter and leave events.
   • Utilized ReactDOM.createPortal to render the dropdown menu outside the card’s DOM hierarchy for better positioning.

2. Dynamic Menu Positioning:

   • Implemented a position update mechanism to ensure the dropdown appears correctly relative to the card.
   • Used MutationObserver and ResizeObserver for dynamic adjustments to the menu's position.

3. Styling Adjustments:

   • Updated CSS to include a placeholder for the menu button to maintain layout integrity during hover events.
   • Ensured the menu is styled to overlay on top of the card and remains responsive to various screen sizes.

   Screenshots

Before Changes:

After Changes:

[onamdumbare]

As can be seen in the below image the remove option for the right side track has been cut off. Need to fix it.

[u7630748]

I found another bug
The menu only shows up when we point to the album card:

If the mouse didn't point to the album card, it disappeared:

Second thing: the code seems didn't run linter to format it.

[Siyi-Liu42]

Hi,
I added the necessary test code, modified the JSON file, and ran npm run lint:fix to ensure code consistency.

[Yi-Wang126]

I found another bug The menu only shows up when we point to the album card:

If the mouse didn't point to the album card, it disappeared:

Second thing: the code seems didn't run linter to format it.

Can u guys have a try to solve these bugs, I have already tried to solve it, but it didn't work……

[Siyi-Liu42]

Hi, I attempted to replace the Dropdown component with a Popup containing a Menu, following the idea that Dropdown doesn’t natively support rendering the menu in a portal.

Here’s what I tried:

• I used popper={{ positionFixed: true }} to render the popup inside a portal.
• Adjusted the menu entries to use Menu components instead of Dropdown components for better control.

However, despite these changes, I encountered issues. The main problem was a large white box surrounding the Remove menu item, which I couldn’t resolve. Additionally, aligning the Popup properly was tricky, and I couldn’t get the behavior I wanted. Sad for that.