Tabs not responsive

[Pithikos]

What version of daisyUI are you using?

4.10.1

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://codepen.io/Nijoko/pen/BaExxeW

Describe your issue

In small screens, tabs seem to take a full width horizontally and go beyond the view of the screen.

        <div role="tablist" class="tabs tabs-bordered tabs-lg">
            <a role="tab" class="tab">Tab1</a>
            <a role="tab" class="tab">Tab2</a>
            <a role="tab" class="tab">Tab3</a>
            <a role="tab" class="tab">Tab4</a>
            <a role="tab" class="tab">Tab5</a>
            <a role="tab" class="tab">Tab6</a>
            <a role="tab" class="tab">Tab7</a>
        </div>

[github-actions]

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

[saadeghi]

What is the expected behavior when there are this many tabs next to each other?

[Pithikos]

I guess either similar to menu buttons - each tab button taking full width of screen, one under the other. Or alternatively break into enough lines to fit the contents (so in the example !Tab5" should have broke into a separate line).

[saadeghi]

This will be fixed in daisyUI 5 soon.

Until then, there are 3 options you can handle this situation:
https://play.tailwindcss.com/grQ7yiwpvS?size=362x720

My suggestion is the second one. It looks better on mobile.
But in general, I wouldn't put these many items next to each other for small screens.
It's better to use a dropdown or sidebar drawer or a vertical collapsible menu for mobile screens.

Let me know if you have a question.

[Pithikos]

Thanks! Didn't really expect such a timely and full response. Really appreciated :)