SVG of submenu is collapse

[Yokoi-Tofu]

daisy ui is very useful. However, I am having trouble with.

If you place an SVG with rect in a submenu, the SVG will be 100% width.

For example, a square SVG will be a rectangle.

<ul class="menu menu-horizontal bg-base-100">
  <li><a>Item 1</a></li>
  <li tabindex="0">
    <span>Parent</span>
    <ul class="bg-base-100">
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <rect x="4" y="4" width="16" height="16" rx="2" />
        </svg>
      </li>
      <li><a>Submenu 2</a></li>
      <li><a>Submenu 3</a></li>
    </ul>
  </li>
  <li><a>Item 3</a></li>
</ul>

I think this is having impact.

.menu > :where(li) > :where(ul) :where(li) :where(:not(ul)) {
  width: 100%;
  white-space: nowrap;
}

After the following modification, it now displays correctly.

.menu > :where(li) > :where(ul) :where(li) :where(:not(ul):not(svg *)) {
  width: 100%;
  white-space: nowrap;
}

I would be happy to have it confirmed.
Best regards.

[saadeghi]

The item directly inside <li> will be styled as a menu item. We can't apply the style to the <li> itself because that would cause problems on nested menus.
So if it want a SVG there, put it in a span, link, button, div, etc. So that span (or anything) gets the list item style.

You can see examples with SVG icons here: https://daisyui.com/components/menu/

Let me know if you have any questions.

[Yokoi-Tofu]

Thank you for the reply.

Do you mean using a different tag instead of the <li>?

SVG is now rendered correctly by doing the following.

<ul class="menu menu-horizontal bg-base-100">
  <li><a>Item 1</a></li>
    <li tabindex="0">
      <span>Parent</span>
      <ul class="bg-base-100">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <rect x="4" y="4" width="16" height="16" rx="2" />
          </svg>
        </span>
        <li><a>Submenu 2</a></li>
        <li><a>Submenu 3</a></li>
      </ul>
    </li>
    <li><a>Item 3</a></li>
</ul>

[saadeghi]

No that's not valid HTML.
I meant span inside <li>

<ul>
  <li>
    <span>
      <svg>...</svg>
    </span>
  </li>
</ul>

[Yokoi-Tofu]

I've tried that method.
When I do this, the .menu > :where(li) > :where(ul) :where(:not(ul)) style is reflected in the <svg> and the display is broken.

[saadeghi]

What do you mean broken?
There are examples of SVG in menu here and I don't see problems:
https://daisyui.com/components/menu/

[Yokoi-Tofu]

I'm sorry for my poor explanation.

If there is an <svg> in the submenu as shown below, the <svg> will reflect the .menu > :where(li) > :where(ul) :where(li) :where(:not(ul)) { width: 100%; white-space: nowrap; } and the <svg> will be broken.
If <svg> is placed in a normal menu, it will not be broken.

<ul class="menu bg-base-100">
  <li>
    <span>
      <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <rect x="4" y="4" width="16" height="16" rx="2" />
      </svg>
    </span>
  </li>
  <li tabindex="0">
    <span>Parent</span>
    <ul class="bg-base-100">
      <li>
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <rect x="4" y="4" width="16" height="16" rx="2" />
          </svg>
        </span>
      </li>
      <li><a>Submenu 2</a></li>
      <li><a>Submenu 3</a></li>
    </ul>
  </li>
  <li><a>Item 3</a></li>
</ul>

I will also send you a reference image.

[saadeghi]

Got it. It will be fixed soon. thanks for the details 👍

[Yokoi-Tofu]

Thank you.
I'm glad you got my explanation.
I look forward to seeing it fixed.✨