saadeghi/daisyui

bug: The `.collapse-content` and `.collapse-title` extend beyond the width of the `.collapse` elementi itself

gremo opened this issue · 3 comments

What version of daisyUI are you using?

4.9.0

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/0EeccAgk1i

Describe your issue

The .collapse-content and .collapse-title extend beyond the width of the .collapse elementi itself.

The problem seems not to be related to the content itself, as the following can shrink to the parent width:

<div class="collapse-content visible">
  <div class="flex items-center gap-4">
    <span>Label</span>
    <p class="truncate ml-auto text-primary">
      a word that refers to a lung disease contracted from the inhalation 
      of very fine silica particles, specifically from a volcano; medically, it
      is the same as silicosis.
   </p>
  </div>
</div>

Thank you @gremo 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.

Additional context: grid-template-columns: minmax(0, 1fr) seems to solve the problem.

Same issue here. Fix by @gremo seems to work.