Extra 4px in Viz Picker?

[ceyerkes]

Hey team - I noticed that there's an extra 4px to the right of the RadioDot in the visual picker. It looks intentional in the radio button component in order to allow 8px in between the input and label, but wondering if it's intentional for visual picker, since that leaves about 20px in between the RadioDot and text:

I'm working on refining the delivery overview designs, and need all the pixels I can get, thanks!

[serifluous]

Hey @ceyerkes ! Looks like this was an oversight when we finalized the Figma + code components from the design explorations.

I've got a PR up for the fix here: #3743 and have the Figma library out for review too.

[ceyerkes]

thanks @serifluous!! I reduced padding to 8px on either side of the RadioDot in order to squeeze this overview pipeline as much as possible:

Hopefully that doesn't look too cramped, open to feedback!

[serifluous]

You won't be able to change the padding in the component unfortunately :( unless we reduce it down for everyone.

[lnamba]

Hi @serifluous! I was working on trying to change the padding to 8px on the visual picker, but ran into issues and found this discussion. It seems this is a limitation of the component currently. Are there any plans to add a padding prop or something else to adjust this at all?

[serifluous]

Hey @lnamba ! We don't have any plans to do that right now—you'll have to readjust the layout of each card, or build something custom if you're finding the horizontal space too tight.