bug: Floating Label overlays the drawer component

[kensodemann]

Reproduction URL (Required)

https://github.com/kensodemann/show-floating-labels

What version of daisyUI are you using?

5.0.43

Which browsers are you seeing the problem on?

All browsers

Describe your issue

I have an application that has some forms using floating labels. I also have a drawer menu to the left. On smaller form factors, this drawer is opened via a hamburger menu. If this takes place while there is data in the inputs, and thus the labels are floating, they float above the drawer.

I have reproduced this in a simple app. To replicate, run the (see instructions in README.md file), fill in some of the inputs so at least one of the labels floats, then open the drawer using the hamburger menu. You should see the floating labels float above the menu.

Inputs with the labels floating:

Labels floating over the drawer:

I noticed the floating labels use a z-index of 2, and removing that solves this issue, but I have no idea if it causes other issues.

.floating-label {
    &:focus-within, &:not(:has(input:placeholder-shown, textarea:placeholder-shown)) {
        > span {
            opacity: 100%;
            top: 0;
            translate: -12.5% calc(-50% - 0.125em);
            scale: 0.75;
            pointer-events: auto;
            z-index: 2;
        }
    }
}

[github-actions]

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

[sulimanbenhalim]

@saadeghi assign this to me

[sulimanbenhalim]

if removing the z-index:2 this is what it causes:

so I increased the z-index of the drawer