fix alignment of switches positioned absolutely

[iantrich]

closes #3810

[balloob]

Although this fixes it, I rather have us figure out how position: relative is set as an inline style.

[iantrich]

I couldn't figure that out

[bramkragten]

It is the ripple directive:
https://github.com/material-components/material-components-web-components/blob/b1d1640c9c3b27ec0f3c9054c1b2a158f23a891a/packages/ripple/src/ripple-directive.ts#L79

You can prevent it by putting the position inline, saves an override with !important

[bramkragten]

Seems like the google and alexa entities pages are also affected with some styling issues

[balloob]

I think the easier trick is to just wrap the switches in a div, position absolute the div. Overriding the position means the ripple will not work.

[bramkragten]

I tried it, and the ripple seemed to work fine, this behavior has changed in a recent update of mwc-switch, not sure if it is intended or not, seems a bit weird

[balloob]

I still prefer to wrap it, if ripple expects position: relative, we should not mess with it.

[iantrich]

So I would make my own render with the outside div and pass all properties to the inner mwc-switch?

[bramkragten]

No, you just add a div to the switches that are absolute positioned now:

<div class="position-absolute-class">
    <ha-switch></ha-switch>
</div>

[bramkragten]

We also have to look at the google and alexa entities pages:

[iantrich]

I think that's present anywhere there is text after the switch, like editors as well...

[bramkragten]

OK, so it does have a slot, but no styling? I guess we have to add some styling to the slot.