bug: Menu will not allow text to break

[benhchoi]

What version of daisyUI are you using?

v3.0.3

Describe your issue

I expect menu items to respect word breaks, but they don't. Instead, menu items will always overflow. This used to work before the upgrade from v2 to v3 (words would break according to break-normal by default without the need to even include the class, which in my opinion seems like the most logical default).

What browsers are you seeing the problem on?

Chrome

Reproduction URL (optional)

https://play.tailwindcss.com/TdBkm1eFoU

[saadeghi]

The item inside <li> has grid-auto-columns: max-content auto max-content because it has to position other elements inside the menu item as well:

• text
• icon + text
• icon + text + badge
• text + badge

So the first item grows to the max width.

You can opt out of this behavior by adding auto-cols-auto to <a>. Or by using flex. See this example:
https://play.tailwindcss.com/9CD91Y3lx9

Let me know if you have any questions

[benhchoi]

Gotcha, thanks for clarifying!

[ddadaal]

But neither approaches (auto-cols-auto and flex) doesn't work for submenus.

https://play.tailwindcss.com/Sy4pCzcY2y