toast container styling adds display: contents, which breaks styling

[jillesvangurp]

Describe the bug

When I add a toast container, it ends up with a portal-container class and a styling rule that adds this rule somehow.

.portal-container {
  display: contents;
}

This breaks my tailwind styling. Including the styling suggested in the manual. Instead of appearing at the top on the right, the toasts appear at the bottom below my other content because the container is not rendered as a block.

I can change it to display: block in my browser and that fixes it. But I can't do this from code because of this undesired style rule overrides this.

It seems like #782 broke this. It was working fine before that. Right now, toasts are not usable for me.

Expected behavior

There are no magic classes being added to anything and I have full control over the layout. Alternatively, there is a nested div that gets added with the styling of my choice.

Screenshots

[Lysander]

You are right! We do not need this style anymore, as the portal-Factories create their own, but configurable tag. So the whole portalling can be rendered in a CSS agnostic way.

Hint to solution:

• remove the portalContainerClassentirely
• remove all the z-Index related params and constants
• move z-Index definitions into headless-demo implementations

see #799 and probably solve those two as a whole.