bug: v3 Table inside of Drawer overflows on mobile instead of scrolling

[trentjones21]

What version of daisyUI are you using?

v3.0.3

Describe your issue

When you put a table inside of an overflow-x-auto div, it is supposed to allow the table to horizontally scroll. Example:

<div class='overflow-x-auto'>
  <table class='table'>
    ...
  </table>
</div>

Normally in v3, this behaves as expected. However, if you put the table inside of a drawer, horizontal scrolling doesn't work and instead it shrinks the entire page to fit or overflows to the right of the screen.

What browsers are you seeing the problem on?

Chrome

Reproduction URL (optional)

https://play.tailwindcss.com/8f7HDi414B?size=308x901

[NikarashiHatsu]

This happened to me just a few hours ago.
I fixed it by adding overflow-x-auto to the drawer-content and it fixes the issue.

Update:
https://play.tailwindcss.com/YeGVv8BTvH?size=308x901

[trentjones21]

Looks like that does the trick. Thanks! I'm going to leave this open as it does seem to be behaving differently from v2. But feel free to close if this is working as intended.

[neluba]

I still had problems with overflow-x-auto, because it breaks my sticky nav. But min-width: 0; on drawer-content seems to fix it correctly. It also works here in the docs where the same issue occurs, because of the first table. https://daisyui.com/components/table/

[mufteev]

Confirm the problem and thank @neluba for temp solution!

I have a similar problem with <mockup-code/> and <table/>

Sample without min-w-0: https://play.tailwindcss.com/beKXzwfEVF?size=376x901
Sample with min-w-0: https://play.tailwindcss.com/v258fEPwtU?size=376x901

I think this issue related with #2060

[Bewinxed]

This happened to me just a few hours ago. I fixed it by adding overflow-x-auto to the drawer-content and it fixes the issue.

Update: https://play.tailwindcss.com/YeGVv8BTvH?size=308x901

I spent hours trying to figure this out God bless ur soul