bug: drawer-end makes horizontal scrollbar permanently visible.

[kobe-ra]

What version of daisyUI are you using?

v4.4.19

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://daisyui.com/components/drawer/#drawer-that-opens-from-right-side-of-page

Describe your issue

Horizontal scrollbar is permanently visible when using drawer drawer-end. This issue is also visible in the docs.

[github-actions[bot]]

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

[ariaieboy]

the horizontal scrollbar is visible in the Official doc example

[l1c2d3]

I'm observing the same behavior in Edge. Firefox renders correctly. I'm using Next.js 14, tailwindcss 3.3.6, daisyui 4.4.19

I'm using drawer drawer-end in a root layout and that's when this happens. If I change drawer drawer-end to a template or page, the scroll disappears, but the drawer slides from the left, instead of right.

Also, I'm observing some styles not rendering correctly in Edge (oversized components) but correct in Firefox. This was working fine last week, so this bug must have been introduced in the most recent versions.

Edit: This bug was apparently introduced in 4.4.15, as 4.4.14 doesn't show this behavior. As for my oversized components in Edge, I will keep looking, since downgrading all the way through 4.4.0 didn't fix it, so this is an unrelated issue.

[gagansuie]

hi! solved the issue by adding overflow-x-hidden tailwind class to <div class="drawer-side"

[LanceMoe]

hi! solved the issue by adding overflow-x-hidden tailwind class to <div class="drawer-side"

In my project, by adding overflow-x-hidden can be solved on the desktop, but on the mobile phone, the entire screen can be swiped left or right through the touch screen.

After returning to 4.4.14, this problem was solved.

[gagansuie]

If that's the case, you can do md:overflow-x-hidden or something to do this fix on certain screen sizes.

[gereltod-g]

Using version 4.4.19, this error is still occurring. It's not noticeable on macOS Chrome, but on Windows, an unscrollable scrollbar appears.

Update: Cheated problem until it officially fixed. I used tailwind peer class for select siblings, so when input unchecked it disables overflow-y and when input checked it enables overflow-y back again.

<input id="id_wallet_charge_drawer" type="checkbox" className="peer/gcdrawer drawer-toggle" />
<div className="drawer-side z-40 overflow-y-clip peer-checked/gcdrawer:overflow-y-auto">

[bayasdev]

md:overflow-x-hidden

+1