I was hoping someone would be able to provide some guidance on how to reduce the size of a backdrop on a q-dialog?
I’ve tried using the assigning a ref and toggling the elements directly, attempting to gain access to the .q-dialog__backdrop selector through use of querySelector but I’m unable to gain access.

I’ve also tried overriding it through using CSS directly targeting it, through the selector .q-dialog__backdrop which doesn’t seem to take any effect.
This would definitely seem to the right selector, given when inspecting and specifying a height it reduces the size of the backdrop, but no such luck outside of dev tools.

In addition to this, it only seems to reduce the size of it, starting from the bottom up. I’d require it to reduce the size from the top, downwards.
I have some components above where the dialog sits (in the centre of the screen), which I’d require to be visible and unobscured.

In regards to steps taken, I’ve done the following:

myDialog.value.$el.parentElement.querySelector('.q-dialog__backdrop') 

and

.myCustomDialog > .q-dialog__backdrop {
 height: 50% !important; 
}