We want the last item to be on a separate line. Putting display: block on it messes up the alignment of the icon and text since their container has display: flex.
I could technically put another wrapper around the wrapper containing the icon and text and put a responsive display: block on that. But assuming the goal of the Layout primitives was to avoid wrapocalypse like this one.
Please support the "initial" and/or "fit-content" values for width on Box component. So we could write this:
Problem
I'm working on implementing this design:
Which becomes this on mobile:
We want the last item to be on a separate line. Putting
display: block
on it messes up the alignment of the icon and text since their container hasdisplay: flex
.Code with the issue: https://github.com/razorpay/frontend-website/pull/2194/files#diff-1f2c8c5821f57c8376ada25679cfc0b957d02788758ba99df29d8ca16b1599b5R96
Suggestion
I could technically put another wrapper around the wrapper containing the icon and text and put a responsive
display: block
on that. But assuming the goal of the Layout primitives was to avoid wrapocalypse like this one.Please support the "initial" and/or "fit-content" values for width on Box component. So we could write this:
This will render the correct layout: