Fix alignment / padding of ha-switch

[spacegaier]

Breaking change

Proposed change

Previously the <ha-switch> was not properly aligned, see the before/after screenshots. I added 8px of padding, since the material guide says increments of 4px (source), although here 6px might suffice.

There is one visual difference I can spot: The label next to the switch is now a bit farther away. That is because the following selector adds a 4px padding on its own. In other frontend areas where a <ha-switch>is used this does not come into play, since there (e.g. enable buttons of automation or the entity enable button) they are not used in combination with a <ha-formfield>.

.mdc-form-field > label {
    margin-left: 0;
    margin-right: auto;
    padding-left: 4px;
    padding-right: 0;
    order: 0;
}

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[bramkragten]

So officially we should not add padding, but I also don't see our use-case in the material specs. We should make sure the switch lines with the rest of the content, don't stick to the 4px rules of material here.

[spacegaier]

I adjusted the pixels, so it now fits nicely.