s-choice-list radio button becomes distorted on mobile/responsive layouts

Shopify App Store
1

Hi Polaris team,

I found a responsive issue with the `s-choice-list` component.

On smaller screen sizes/mobile layouts, the radio button circle becomes distorted/stretched instead of staying perfectly round.

Steps to reproduce:

  1. Use `s-choice-list` with multiple options
  2. Open the page on a narrow/mobile viewport
  3. Notice the radio circle shape becomes vertically stretched

Expected behavior:

  • The radio button should always remain circular regardless of screen size.

Actual behavior:

  • The radio button becomes distorted on responsive layouts.

I’ve attached a screenshot below for reference.

image
image480×493 50.8 KB

2

Hey @OE_Dev_Trong_Duc - thanks for flagging this and for the screenshot, it does look a bit weird for sure, happy to dig into this. Would you be able to share a small stripped-down repro for this, ideally the s-choice-list markup plus any parent/wrapper CSS involved?

It would also help to know the browser/device or viewport width where you’re seeing it, and whether it happens with the plain docs-style example or only in your app layout. That’ll help us tell whether this is coming from the component itself or a layout interaction around it. Hope to hear from you soon!