bug: Long tab names are squished

[ooker777]

bug: Long tab names are squished

[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?

[github-actions]

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