Input groups get a little wonky on smaller screens. They aren't taking into account the content max width inside a container.
Expected Behaviour
Input groups should not cause horizontal scroll.
Screenshots
Additional context
I tested a fix by setting the column width to the container's content width and it resolved the issue. We'll need to come up with a way to get that to the input groups without screwing up form layouts.
I think if we implement something like min([form-width], [container-content-width]) it should work (assuming we need to account for form width at all... It might just work as expected by getting the container content width.
Summary
Input groups get a little wonky on smaller screens. They aren't taking into account the content max width inside a container.
Expected Behaviour
Input groups should not cause horizontal scroll.
Screenshots
Additional context
I tested a fix by setting the column width to the container's content width and it resolved the issue. We'll need to come up with a way to get that to the input groups without screwing up form layouts.
I think if we implement something like
min([form-width], [container-content-width])it should work (assuming we need to account for form width at all... It might just work as expected by getting the container content width.