Dropdown Overlapping with Authentication Card and Popup UI Issue

[anurag-026]

Has this bug been raised before?

• [X] I have checked "open" AND "closed" issues and this is not a duplicate

Description

The dropdown menu is overlapping with the underlying card/tile, causing visibility issues and making it hard to distinguish the options clearly. After clicking "Show Popup," the popup content overlaps with the underlying main card/tile. Both texts from the popup and the card are visible at the same time, causing a cluttered and confusing UI experience.

Steps to Reproduce

1. Open the dropdown menu and observe the overlap with the card below.
2. Click "Show Popup" and observe how the text from the card and the popup interfere with each other.

Screenshots

Do you want to work on this issue?

Yes

If "yes" to above, please explain how you would technically implement this

1. Fix the Dropdown Overlap Issue: The dropdown overlap issue is likely due to improper z-index settings, which controls the stack order of elements. I'llensure that the dropdown is displayed above other elements when expanded. i. Set the z-index of the dropdown menu to a higher value than the underlying elements (like the card or tile). ii. Ensure the dropdown's container has position: relative or position: absolute to allow the z-index to take effect.

2. Fix the Popup Overlap Issue: i. Increasing the z-index of the popup to ensure it appears above the tile. ii. Adding a backdrop effect or semi-transparent background to dim or blur the content beneath the popup, so the user's focus remains on the popup.

[Jaishree2310]

@anurag-026 I have assigned this issue to you. Make sure you keep giving updates on your work. Happy coding!

[anurag-026]

@Jaishree2310 Yes, I'm nearly finished with the work and will be raising the PR by tomorrow.

[anurag-026]

@Jaishree2310 Could you add the "hacktoberfest-accepted" tag to this issue.