Labels are misaligned for radio and checkbox controls in customizer

[sayedwp]

Before:

After:

I think its due to the markup refactoring.

[westonruter]

This is probably a regression introduced in #33085 via [41740] as the label element no longer wraps the radio input.

[Shital Patel]

Change in forms.css (vertical-align: top;)

[subrataemfluence]

@shitalmarakana I have tested your patch in Chrome and Firefox and it looks good. All radio buttons seem to be aligned properly inside customizer now. Thank you!

[sayedwp]

@Shital Patel I think updating the label in forms.css file would affect other labels in WordPress specially in post edit and general options page as I can imagin. You might want to be a bit more specific and add this css in
wp-admin/css/customize-controls.css file.

.customize-control-radio label,
.customize-control-checkbox label {
	vertical-align: top;
}

I just noticed checkboxe labels like "Display Site Title and Tagline" in "Site Identity" section is also not aligned which would be fixed with the above css.
But then again it would affect other customizer controls like "Menu Locations" checkboxes, so those would need to be fixed as well.

[Shital Patel]

Update customize-controls.css file

[sayedwp]

Thanks, you may want to consider these as well.

But then again it would affect other customizer controls like "Menu Locations" checkboxes, so those would need to be fixed as well.

Also checkboxes and radio lables would need some care in small screens.

[Shital Patel]

Update customize-controls.css file

[subrataemfluence]

@sayedwp Not sure if this works but I have tested my patch in different device widths (320 to 1366) and they seem to be OK. Also if this works, the same rule needs to be added in custom-constrols-rtl.css as well. Patch follows.

Please let me know what you think.
Thank you.

[sayedwp]

@Shital Patel Thanks that's almost perfect, I have just made some improvements in your patch.

@subrataemfluence Sorry, I am not aware of rtl support in customizer.

@westonruter I found one more css issue while checking this one in small screen ( was also there in 4.8 ) which I have covered in my patch.

[westonruter]

@sayedwp @subrataemfluence RTL CSS will be generated automatically as part of the build. No need to supply any patch for RTL files.

[melchoyce]

Looks good to me on Firefox and Chrome 👍

Can I get some help testing Safari and IE11+?

[westonruter]

Safari looks good. See screenshots 👆

[westonruter]

In 41817:

Customize: Fix vertical alignment of radio and checkbox inputs after [41740].

Props Shital Patel, subrataemfluence, sayedwp.
Amends [41740].
See #33085.
Fixes #42157.

[westonruter]

In 42152:

Customize: Prevent nav menu location assignment checkbox change from increasing height by 1px.

Props obenland.
Amends [41817].
See #42157.
Fixes #42492.

[SergeyBiryukov]

In 42436:

Customize: Prevent nav menu location assignment checkbox change from increasing height by 1px.

Props obenland.
Amends [41817].
Merges [42152] to the 4.9 branch.
See #42157.
Fixes #42492.