Toast messages occluded by page elements such as text boxes

[Erudition]

I'm submitting a ...
[x] bug report
[ ] feature request

Current behavior:
When firing a toast message, some page elements are not covered properly by the toast. Instead, those elements cover the message!

In the example above, the elements are not set to unusual z-index values or anything.

Expected behavior:
The Toast message, since it is ephemeral, should cover just about everything. I think it should have some transparency in it's backdrop, which should help if anything underneath it needs to be seen.

Steps to reproduce:
In your browser console try sending a toast on a page with PWA elements:

window.Capacitor.Plugins.Toast.show({ text: "Here's a long Toast message. You can see under me, but if you scroll the page, some elements cover me up!", duration: '10000'}).then();

Then attempt to scroll elements past it, such as form input elements (like those pictured above).

Potential solution
Increase Toast Z-index?

[Malcx]

Manually overriding the z-index in a stylesheet seems to work until this properly gets fixed.

pwa-toast{
z-index:9999;
}