saadeghi / daisyui

๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ โ€ƒThe most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.24k stars 1.31k forks source link

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

Open gremo opened 7 months ago

gremo commented 7 months ago

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>
github-actions[bot] commented 7 months ago

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.

gremo commented 7 months ago

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

perelin commented 7 months ago

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