Drawers open behind modals

[dimitrov-adrian]

Preflight Checklist

• I have completed all Troubleshooting Steps.
• I'm on the latest version of Directus.
• There's no other issue that already describes my problem.

Describe the Bug

Items drawer appears behind the v-modal in upload dialog.

To Reproduce

Create text field with markdown interface, allow image tool. With the new field add image and pick "Choose from library"

Untitled.mov

Errors Shown

No response

What version of Directus are you using?

9.4.2

What version of Node.js are you using?

16

What database are you using?

mysql5.7

What browser are you using?

Chrome

What operating system are you using?

macOS Big sur

How are you deploying Directus?

locally

[ijpatricio]

I came to add this Issue, and noticed is already here.
Can confirm.
I started using with docker, but will try to install in local, so I can try to solve this.

[log4shell]

I can confirm the same issue on my local instance of Directus 9.4.2. As a manual work-around in the browser, you can right-click and "inspect" to file upload dialog and then delete the <div> block that holds this dialog:

After it's removed, you can select files from the file library that was blocked behind the dialog.

[rijkvanzanten]

This is caused by my update to the drawer handling here: 6e439db that wrongly assumes that dialogs should always be above drawers

[ijpatricio]

I should have had time to look into it, but time is very tight here.
I'll try my best

[rijkvanzanten]

No worries @ijpatricio, I know how that goes.. 👀

The reason I split up the two "stacks" is that I relied on CSS's nth-of-type operator to do the stacked drawer effect. We might be able to revert that split by using a different tag (div vs.. span? is <dialog> supported enough yet?) as nth-of-type only checks against used tag