bug: 'join-vertical md:join-horizontal' failed to set horizontal style border on nest join-item

[ZreXoc]

What version of daisyUI are you using?

No response

Which browsers are you seeing the problem on?

Firefox

Reproduction URL

https://play.tailwindcss.com/X7oydx51nb

Describe your issue

border of nest join-item doesn't change into horizontal style in md breakpoint.

<div class="join w-[80vw] flex join-vertical md:join-horizontal bg-slate-500 p-2">
  <button class="btn join-item">111</button>
  <div class="flex-1">
    <button class="btn join-item w-full bg-slate-200">222</button>
  </div>
</div>

[github-actions]

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

[ukeloop]

The join-item class must be used directly under the join class.

Example code:

<div class="join w-[80vw] flex join-vertical md:join-horizontal bg-slate-500 p-2">
  <button class="flex-none btn join-item">111</button>
  <button class="flex-1 btn join-item bg-slate-200">222</button>
</div>

[ZreXoc]

The join-item class must be used directly under the join class.

That's not correct: Even if join-item is not a direct child of the group, it still gets the style. So it might be a bug with join-vertical and join-horizontal.

I have to wrap the button in div for some reason and I solved it as follows:

<div class="join w-[80vw] flex join-vertical md:join-horizontal bg-slate-500 p-2">
  <button class="btn join-item">111</button>
  <div class="flex-1 contents join-item">
    <button class="btn w-full bg-slate-200 rounded-[inherit]">222</button>
  </div>
</div>

[saadeghi]

This is a bug and it will be fixed in daisyUI 5.