bug: Tab text wrap with large content

[rreeves8]

What version of daisyUI are you using?

^4.4.20

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/LhQq5wu6J4

Describe your issue

When tab content is large enough. The tab text overflows to the next line.

Happens to me on NextJS and remix. Screen shot shows when tab content text overflows the input does as well

[github-actions]

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

[danaildichev]

Have you tried adjusting the width of the tab?

Could it have something to do with: https://github.com/saadeghi/daisyui/blob/master/src/components/unstyled/tab.css#L14

[snopoke]

Same issue here. I was able to resolve it by adding grid-flow-col auto-cols-max to the tabs div:

<div class="tabs grid-flow-col auto-cols-max">

[axlgtm]

You can add whitespace no wrap to the radio input. Its solved my problem

<input type="radio" name="my_tabs_2" role="tab" class="tab whitespace-nowrap" aria-label="Operational Utility" />
<div role="tabpanel" class="p-6 tab-content bg-base-100 border-base-300 rounded-box">Tab content 3</div>