Button splits label on more lines

[mperrando]

When placed inside the hierarchy Columns->Column[width="content"]->Columns, label is split on more lines even if there is enough space to accomodate it on one line.

Note that removing the width="content", the text stays on one line, given there is enough space.

https://playroom.bento.buildo.io/#?code=N4Igxg9gJgpiBcIA8AhCAPABABwIZSgEsA7AcwF5gBGANgF8A%2BAHWM0yQGEIAbAVwFtiAZ0xC8YGJVqMWbNkgAqhAC7cYowgC9JTEPxhEBuhgGUI%2BzMpjplmABYwATjAA0mfrgCeAI3XcIZEgA9EqqMMyscpw8AqwA7oRQynbkupDEVhnGsnLyXHyCImK4EpQAHHSYuNyEpMQAmqngMBlO2ZG58ii8ysoBOZ1yANYkUE3KjrjCeM5ZIAODGtpNQh7c3LoLg3aETriOYHaeTdiOhB6Onpsdi9y4vtzjcRCYz45QQteLmEER36g9PrELadEbEMa6CZTYqzZRfb5LHQgVbVDbzG7bXaTA5HE5nC5XdEIzB3B5NAIwN5QeGDX4gvIxQR-BGcHbYTCQfyOJrOakgEn3GCPNJs3Q-ZmDYL5WISqJBaWFWVSxnEZnKgrCCLBNDoCIgFwgBJJOxCBAAbQAunQgA

[gabro]

Hi @mperrando, yes this is due to how flexbox works in relation to Button. When writing <Column width='content'> we mean "whatever width fits the content and nothing more".

Now, the minimum width of a Button is essentially the width of the longest word of the label (plus padding). This is because <button> defaults to wrapping its content.

Now, back to your problem, one possible workaround is to add this CSS rule:

button {
  white-space: nowrap
}

which prevents button labels from wrapping.

Bento-wise, this is something we may consider doing ourselves and limit Button to have one-line labels. I'll discuss it with the team.

[gabro]

Actually, another more sensible workaround would be to use Inline instead of Columns for the inner buttons layout. Here's an example which does not require custom CSS:

https://playroom.bento.buildo.io/#?code=N4Igxg9gJgpiBcIA8AhCAPABABwIZSgEsA7AcwF5gBGANgF8A%2BAHWM0yQGEIAbAVwFtiAZ0xC8YGJVqMWbNkgAqhAC7cYowgC9JTEPxhEBuhgGUI%2BzMpjplmABYwATjAA0mfrgCeAI3XcIZEgA9EqqMMyscpw8AqwA7oRQynbkupDEVhnGsnLyAJLE3CTqYrgSlAAcdJi4RaTEAJqp4DAZTtmRufIovMrKATldcgDWJFDNyo64wnjOWSCDQxrazUIe3Ny6i0N2hE64jmB2ns3YjoQejp5bnUvcuL7cE3EQmC%2BOUEI3S5hBET%2BoXr9YjbLqjYjjXSTaalObKb4-ZY6EBrWqbBa3HZ7KaHY6nc6Xa4YxGYe6PZoBGDvKAIoZ-UHyDi7bCYSD%2BRzNZw0kCkh4wJ5pZm6X7-LrBApFYjhRbBLh8QSi2UxQRCCLBNDoCIgFwgBJJOxCBAAbQAunQgA