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

siraisisatoru commented 7 months ago

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 https://github.com/saadeghi/daisyui/issues/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 https://github.com/saadeghi/daisyui/issues/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.

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

Thank you all maintainers! I love daisyui!

github-actions[bot] commented 7 months ago

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.

don-esteban commented 4 months ago

Hi contributors, hi community,

We face the same issue. We use daisyUI, OSes and Browsers with the latest releases. Besides Safari and even Chrome on iPad the issue appears on FF latest SSR version 115.11.0esr (64-Bit). We tested on Windows, Linux and iOS machines.

EDIT:

Crome on iPad -> issue
Safari on iPad -> issue
FF SSR version 115.11.0esr (64-Bit) -> issue
Chrome, Safari, FF, Edge on other platforms -> no issue

It should be easy to reproduce the issue. I have only a Next.js project with Tailwind/daisyUI configured. If you really need a reproducible, I'll provide it. But it would take me some time. Perhaps the code below is enough. If not, please let me know. A fix is important for us because we could not figure out a workaround and we go in production soon.

Thanks for your attention and this great open-source project!

export default async function Page() {
  return (
    <div>
      <ul className="menu w-56 rounded-box bg-base-200">
        <li className="menu-title">Correct. Word wrapping.</li>
        <li>
          <a>Item 1</a>
        </li>
        <li>
          <a>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</a>
        </li>
        <li>
          <a>Item 3</a>
        </li>
      </ul>
      <ul className="menu w-56 rounded-box bg-base-200">
        <li>
          <h2 className="menu-title">Wrong. No word wrapping.</h2>
          <ul>
            <li>
              <a>Item 1</a>
            </li>
            <li>
            <a>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</a>
            </li>
            <li>
              <a>Item 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  );
}

In plain HTML:

<div>
  <ul class="menu w-56 rounded-box bg-base-200">
    <li class="menu-title">Correct. Word wrapping.</li>
    <li>
      <a>Item 1</a>
    </li>
    <li>
      <a>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</a>
    </li>
    <li>
      <a>Item 3</a>
    </li>
  </ul>
  <ul class="menu w-56 rounded-box bg-base-200">
    <li>
      <h2 class="menu-title">Wrong. No word wrapping.</h2>
      <ul>
        <li>
          <a>Item 1</a>
        </li>
        <li>
        <a>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</a>
        </li>
        <li>
          <a>Item 3</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

don-esteban commented 4 months ago

Okay, I found the workaround. Just set whitespace-normal to the <li> or <a>.

saadeghi / daisyui