So I try to design a Snackbar component :
Problem is when I resize the component the text don’t react to the padding since it is hug.
If I set the text as “fill”, the group will be aligned to the left of the component since the text will fill all the empty space.
What can I do ?
Not sure if this helps, but a way around this for me is to create a button (or element) with 2 variants “center” and “truncate”. Then I can quickly toggle the layout from an button instance as needed.
Hello Nate, thank for your quick response !
So you confirm that theres is no solution that work for both case on ?
Indeed in that case, a truncate variant is the only solution (I wanted to avoid that because it is for a design system that won’t be used by myself)
There may be some way to use min-max width, but I haven’t found a way yet to support both a hug/fill at the same time.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.