Badge

[flatcapco]

Hi the default badge class implements a fixed height which doesn't work so well when using with a longer badge text.
using h-auto and text-center will prevent the following issue:

current:
https://capture.dropbox.com/5aXaloiKAujIX6O3

suggested:
https://capture.dropbox.com/dz4y6bxuLs3PksKL

[saadeghi]

I see but none of the screenshots you posted look good.
If the text doesn't fit, maybe you should give it more space to avoid text break? 🤔

[flatcapco]

I mean I do appreciate that, and of course theres lots of different contexts this could become a issue.

Would you be opposed to using inline instead of inline-flex does that satisfy a better default? Its still ugly (no disagreement here) but it seems a more graceful or recognisable destruction of the badge as a worse case scenario?

https://capture.dropbox.com/9t7XdHNya81JuqvJ

Obviously I can handle this all myself I'm just trying to help suggest a more robust default

[saadeghi]

Can you show me the the whole block you're designing? I'm sure there's a better way to avoid this issue.

[flatcapco]

The data is driven from the database - a (user submitted tag cloud) for locations.
Adding a tighter word count wouldn't work for the system and overflow (is messier in my opinion) so I need to allow certain badges to break over multiple lines (worse case scenario but possible since we don't control the order or number of these tags)

[saadeghi]

For a tag could if you're not limiting the characters, I would suggest something like this:
https://play.tailwindcss.com/HTuVJibZCc

[flatcapco]

Thanks I'll try that - seems like the best solution