[Bug]: Drawer component is not visible all the time; the Z-index property needs to be implemented

[vsnshanmuganathan]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

If we have multiple drawer components, sometimes one may be hidden behind another and not visible.

Expected Behavior

The last called Drawer component should be visible on the screen.

Steps to reproduce

I'm not a coding expert, but in WordPress, there is something called the Z-index property, which is used to stack containers on top of each other. The visibility of these containers depends on their Z-index values.
I have attached the project file to reproduce this error.
test.json

Environment

Lowcoder latest on Docker (2.4.12)

Additional Information

In the video below, if I open the account drawer first and then the left drawer, both of them overlap (which is fine) until I refresh the page.
https://github.com/user-attachments/assets/56a6491b-066e-4e90-8fb1-30c2aecd7f79

However, if I open the left drawer first, close it, and then open the account drawer followed by the left drawer, the left drawer appears behind the account drawer, which is not what I expected. The left drawer should be above the account drawer.

Screen.Recording.2024-11-11.at.4.25.11.PM.mov

[vsnshanmuganathan]

While solving this bug, please add a z-index to the modal component as well, because both the tabbed and modal components are overlapping and hiding each-other.