Radio minWidth should be computed on window resize events

[GianlucaGuarini]

Please only report technical bugs. Clarify design issues in the slack channel #ux-ui-support.

A radio input of type button <axa-radio button> computes the min-width of it's content only once breaking its responsive behavior.

Expected Behavior

The width of the .a-radio__content.js-radio__content should be responsive and not fixed via min-width inline styling.

Current Behavior

The content of the radio button breaks if the window gets resized.

Steps to Reproduce

1. Open this storybook link
2. Resize you browser window (make it smaller than your initial viewport)
3. See the horizontal scroll appearing

Context (Environment)

Possible Solution

Let the noAutoWidth attribute prevent this issue. At the moment it's bypassed if the radio is of type button. Eventually recompute the minWidth on window resize.

[GianlucaGuarini]

I have played a bit with the code of the radio buttons and I think that this issue can be solved removing the noAutoWidth and minWidth javascript options. Using the css display:grid; combined with gap properties I have been able to solve all the display issues I have identified.

[MKaHead]

Thank you @GianlucaGuarini I would also prefer something like this display:grid; combined with gap. @markus-walther