Tabs Wrapping/Stacking on small devices

[bluejabiru]

In one of the earlier version of diasy (pre 4; 3.x?) -- when using a larger number of tabs (say, each with icon and text), they would nicely wrap/stack on smaller devices like iPad/iPhone.

For example, given 5 tabs each with some icon, and a descriptive text -- on my iMac it shows perfectly, all tabs on the same row. Then, on the iPad, 3 of the 5 would show on the first line, the remaining ones would wrap (or stack) onto another line underneath.

This behaviour seems to have disappeared with the conversion to v4.x -- or, quite possibly, it has been implemented differently and I have not caught up yet :-( So, at present, I had to resort to "icon only" on the smaller screen size (with roll-over help text to show the tab label).

Thoughts? Comments... to achieve the same effect?

[saadeghi]

Wrapping tabs in a scrollable area would be helpful, and it looks better than overflowing tabs to the next line.

Here's an example: https://play.tailwindcss.com/tS1G5dSfRZ

<div class="m-10 overflow-x-auto">
  <nav role="tablist" class="tabs tabs-lifted whitespace-nowrap">
    <a role="tab" class="tab">Long tab title</a>
    <a role="tab" class="tab tab-active">Long tab title</a>
    <a role="tab" class="tab">Long tab title</a>
    <a role="tab" class="tab">Long tab title</a>
    <a role="tab" class="tab">Long tab title</a>
    <a role="tab" class="tab">Long tab title</a>
    <a role="tab" class="tab">Long tab title</a>
    <a role="tab" class="tab">Long tab title</a>
    <a role="tab" class="tab">Long tab title</a>
  </nav>
</div>

Let me know if you have a question.

[bluejabiru]

thx for the prompt response; quite helpful hint(s).