bug: Drawer contents make contents over screen on mobile.

[seunex17]

What version of daisyUI are you using?

v3.0.1

Describe your issue

Look like there is a problem when using an external classes in a drawer contents. The designs are perfect on version 2 but look broken on v3.

In my pages i am using a slider library swiperjs any time it in the drawer-content is overlap the screen. But when you move it out of the drawer conte tents it remain perfect.

P.S this does look okay on PC and Tablet view but only affect the mobile views please take a look the screen below.

PC:

Tablet PC:

On Mobile Device: (V3)

Mobile device (v2)

Am not sure why but just find it this way. No much worries on my end i just have to rollback to v2 and keep building with it.
But any one who try to build with diasy ui and going to use Drawer and a slider packages like SwiperJs or Splide with face this problem.

What browsers are you seeing the problem on?

Chrome, Firefox, Edge

Reproduction URL (optional)

No response

[saadeghi]

It's really hard to guess what is the issue when you don't provide a reproduction repo or a code example, my friend.

[seunex17]

@saadeghi I am not very experienced in reporting issues and bugs, but a quick way to reproduce the problem is by setting up a new project with Daisy UI and using the drawer component to wrap the page contents. Then, try using one of the slider packages like Swiper.js or Splide. The responsiveness may be an issue on mobile devices, whereas it looks perfect on PCs. I will prepare a reproduction code for this today. Thank you.

[Bewinxed]

No idea why this fixes it but it fixes it

Set overflow x auto on the collapse content div

#1914 (comment)