bug: Long tab names are squished

[ooker777]

I'm using radio tab lifted + tab content. The code is the same with the demo, except the tab names are long:

<div role="tablist" className="tabs tabs-lifted">
  <input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 1 is very long" />
  <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 1</div>

  <input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 2 is very very long" checked />
  <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 2</div>

  <input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 3 is very very very long" />
  <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 3</div>
</div>

In mobile, I expect each tab to have its own row, so they don't get shrunk like this:

I see this on Firefox

Reproduction URL: https://play.tailwindcss.com/kuDMa8J3sD?layout=preview&size=198x720

[github-actions[bot]]

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

[tonyalaribe]

I ran into this issue as well

[ooker777]

You can prevent that by setting grid-column of the tab panel to the amount of tabs you have:

<div class="w-[274px]">
  <div role="tablist" class="tabs tabs-lifted">
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1 is very long" />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6"></div>

<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2 is very very long" checked />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6 !col-span-2">
  11112222333344445555666677
</div>
  </div>
</div>

As for why it happens, the .tab-content has:

grid-column-start: 1;
grid-column-end: span 9999;

At the small width of 274px, the content of the .tab-content becomes significant and affects the width of these other 9997 grid column tracks that the .tab-content spans, shrinking the grid column tracks that the tab labels reside.

Source: Why are the tab label widths started to squish when their respective content panels have more than 32 characters?

[captainkapnap]

I'm using radio tab lifted + tab content. The code is the same with the demo, except the tab names are long:

<div role="tablist" className="tabs tabs-lifted">
  <input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 1 is very long" />
  <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 1</div>

  <input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 2 is very very long" checked />
  <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 2</div>

  <input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 3 is very very very long" />
  <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 3</div>
</div>

In mobile, I expect each tab to have its own row, so they don't get shrunk like this:

I see this on Firefox

Reproduction URL: https://play.tailwindcss.com/kuDMa8J3sD?layout=preview&size=198x720

This also solved an issue where Tab 1, when selected, would have a margin-bottom of something large. Tab 2 and 3 were fine but tab 1 would float way above the tab-content.

edit: This only occurred when the browser viewport was at a ~large height. Around 680px and higher.