bug: long string in menu does not wrap in safari (with temp solution)

[siraisisatoru]

What version of daisyUI are you using?

v4.7.2

Which browsers are you seeing the problem on?

Chrome iOS + Safari Mac

Reproduction URL

https://daisyui.com/components/menu/#submenu

Describe your issue

Hello.

I am sorry that I didn't found #2626 and opened this issue.

I am currently working on a personal project that uses navbar-with-icon-at-start-and-end and embed drawer to the left most menu element in Navbar. It was functional beautifully until I had one of the strings in element become too long and not auto wrapping on my page using iOS Chrome. Then I investigated a bit by trial and error with my page by adding w-52 (some other values that fit my design, applied to the outermost ul) to my menu element which I thought was meant to be not being wrapped as mentioned in #2182 which was an issue for dropdown element. The result remains the same with the long strong still making all elements expended and even over the edge of the drawer on iOS Chrome. In contrast, it works totally fine in Chrome on Mac. Then I guessed it maybe something related to iOS and thus I checked with other browsers and it seems it happened to Safari on Mac as well.

The picture below shows the problem I tried to describe above. (They all run the same code by accessing localhost at the same time)

---

The story didn't end here. I further investigated the behaviour of the long element that caused the whole width using Safari inspector and I found there is white-space:nowrap from nowhere (I didn't set it manually).

I guess it was somewhat other plugins messed it up locally. To prove this is my own issue, I tried to use Tailwind Play but it can not even load Daisyui on my end (Chrome and Safari on Mac).

---

As I what to wrap my text in sub-sub-sub menu, I found submenu which is similar to my case and can reproduce my cause. (Upper is Safari on Mac and below is Chrome on Mac.)

---

TL;DR

Issues:

• Long text not wrapping in menu in browser
  • Not working in iOS Chrome and Mac Safari
  • Can be reproduced on the official page
• menu class does not work in Tailwind play

---

Proposed solution
Add whitespace-normal to the li element to bring it back to normal.

Thank you read through this long issue and hopefully we can have a clarification on the following.

1. Which one is the intended behaviour?
2. Which element is actually causing the issue? (maybe menu?)
3. Any official solution for this besides my one?

Thank you all maintainers! I love daisyui!

[github-actions]

Thank you @siraisisatoru for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.