bug: Tab text wrap with large content

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library

https://daisyui.com

MIT License

32.11k stars 1.24k forks source link

bug: Tab text wrap with large content #2678

Open rreeves8 opened 6 months ago

rreeves8 commented 6 months ago

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[bot] commented 6 months ago

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 commented 5 months ago

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 commented 4 months ago

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 commented 3 months ago

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>