Assembler: Single Choice Option Block's proportion is off/looks squeezed when the theme Assembler is active

[retnonindya]

Quick summary

When theme Assembler is active on a website, the Single Choice Option Block's display looks squeezed on the live site. Please refer to the following screenshot:

The button looks normal on the page editor:

On the live site, however, you can see the button looks squeezed:

Steps to reproduce

1. Create a website (I'm using AT site since this is from user's report and the user's site is AT.)
2. Make sure the site is on the theme Assembler. You can either use "Build Your Homepage" flow from the WPCOM Themes Directory, or search for the theme Assembler on the WPCOM Themes Directory and activate from ther.
3. Create a post/page. Preferably page.
4. Add Form Block, and make sure there is a Single Choice Option (Radio) Block in it.
5. Inside Single Choice Option (Radio) Block, make sure there is a Single Choice Option Block (child block)/add options
6. See the radio buttons.
7. Save the page/publish the page.
8. Check the page on the live site. Notice the squeezed-look.

What you expected to happen

The radio button stays round

What actually happened

The radio button looks squeezed and not proportional.

Impact

Most (> 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Atomic

Logs or notes

Workaround:
Switch theme. In my interaction, I suggested the user switch the theme to TT4.

User report: 8458777-zen

[tvolpert]

The min-height setting on all form fields except checkboxes and submit buttons is what appears to be causing this. I'm not sure why we wouldn't have made an exception for radio buttons as well 🤔

This CSS workaround should correct it:

/* correct radio button sizing | XXXXXX-zen tcrv */ 
.contact-form .grunion-field-wrap input.radio {
  min-height: unset;
}
/* End | XXXXXX-zen tcrv */

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 8458777-zen
• -zen
• 8541929-zen
• 8823112-zen
• 9003176-zen

[mikeicode]

We have run into this on multiple DIFM Express builds using Assembler. I used this CSS:

input[type="radio"] {
	min-height: unset !important;
}

[krutidugade]

Another report here 8541929-zen. Suggested adding CSS shared by @mikeicode.

[cat-og]

8823112-zd-a8c. Provided CSS here as well.

[MikeoMattic]

9003176-zd-a8c