bug: dropdown breaks in tables with overflow applied

[Flo0807]

What version of daisyUI are you using?

v4.12.10

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/zW20wMgehO

Describe your issue

I want to place a dropdown inside a table that has a horizontal scrollbar, but it does not seem to work properly. I expect the dropdown menu to be placed above the table, but it is rendered inside the table. In the provided playground example, you can see that the second table has a vertical scrollbar and the dropdown menu is not placed properly.

If I remove the overflow-x-auto class, everything seems to work fine, but I cannot do this in my table because I want to keep a horizontal scrollbar.

[github-actions]

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

[saadeghi]

This is not possible by CSS until the new HTML popover API and the upcoming CSS anchor positioning API get supported by major browsers.

We're planning to add them to the next major version of daisyUI (5.x) but until then you can use JS solutions like Headless UI for the popover.

Let me know if you have a question.