Fix alignment of ToggleControl label by removing inherited line-height

[glendaviesnz]

Description

As noted in #17127, the alignment of the ToggleControl label is incorrect if used used outside of an InspectorControls element. This is due to the component inheriting a different line height from .editor-styles-wrapper. This introduces a minor css change to prevent the toggle element inheriting the line height.

How has this been tested?

Visually tested in browser - see screenshots below.

Screenshots

Before:

After:

Multi line label before:

Multi line label after:

Fixes #17127

[youknowriad]

How does it behave with a long label (multiline)?

[glendaviesnz]

How does it behave with a long label (multiline)?

Good question, I will give that a try early next week and let you know.

I did also play around with adding a flex align-items, but there were some issues with the bottom margin on the InspectorControls layout with that approach - but if any issues with multiline I will explore the flex alignment options a bit more - the advantage of getting it working with correct flex alignments is it should work properly with any inherited line heights.

[glendaviesnz]

How does it behave with a long label (multiline)?

Turned out that currently the InspectorControls layout was also slightly broken with multiline labels (see new screenshots added above).

Adding a flex align-items as well as removing the line height seems to fix it for both single and multi line labels in both locations

[youknowriad]

LGTM :+1