bug: Collapse with icon, Arrow is jumping but plus/minus icon seems ok

[OlegSuncrown]

What version of daisyUI are you using?

v4.5.0

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/EqKz1x2vVS

Describe your issue

Collapse with checkbox and icon with more content has Arrow Icon what is jumping but plus/minus icon seems ok. In the Arrow Icon: .collapse-arrow > .collapse-title:after { top: 50% } that's why animations is weird, but it properly centered. In the .collapse-plus > .collapse-title:after { top: 0.9rem; } that's why it looks ok.

Maybe something like this: https://play.tailwindcss.com/i2LKgeYQ1o?file=css

.collapse-title {
    min-height: 2.5rem;
}

.collapse:not(.collapse-close):has(> input[type=checkbox]:checked), .collapse:not(.collapse-close):has(> input[type=radio]:checked) {
    grid-template-rows: 2.5rem 1fr;
}

.collapse {
    grid-template-rows: 2.5rem 0fr;
}

[github-actions[bot]]

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

[Nekxio]

Hello @OlegSuncrown 😄 I'm taking a look at it right now. I think to stay as adaptive as possible, without changing everything that has been done for the collapse, is to change top position of the arrow icon. This is consistent with the collapse "arrow plus/minus icon". I'm open to other proposals until the PR is reviewed 😉

[ClassicOldSong]

This fix caused the arrow being not centered when the title bar is not the default height.

[Nekxio]

Thanks for your feedback, I'll take a look and suggest another solution.

[Nekxio]

After trying different approaches, I can't seem to solve the problem. I've noticed that my first idea solved the problem, but it's no longer centered. However, when the top is defined as a percentage, the problem persists. Looking for another solution, I found that by placing the svg in the dom, we could probably align the text and arrow without the problem of displacement when rotating. This involves changing the architecture of the component. Moreover, the component with the plus/minus icon isn't centered either when the title is longer.

If anyone can find a simpler solution, I'd be very interested. 😄