bug: Tabs using `grid-span: 9999`

[Lko]

What version of daisyUI are you using?

4.10.2

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/ajpvJUchNb

Describe your issue

This is not really a bug report rather a suggestion. I was using tabs and I wanted to turn on the grid visualization of the browser, as soon as I did that, my browser started lagging, and I have a fairly powerful PC. I found out that the root of the problem was the tab content being grid-column-end: span 9999.

I tried using grid to fix this issue but I couldnt (without manually adding the number of tabs you have), so I chose a flex-based layout, which seems to work as well as the original one but without the need of creating thousands of columns.

I took some code from the docs and only added a few css lines to fix it as you can see here

<div role="tablist" class="tabs tabs-lifted">
  <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1" />
  <div role="tabpanel" class="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" class="tab" aria-label="Tab 2" checked />
  <div role="tabpanel" class="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" class="tab" aria-label="Tab 3" />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 3</div>
</div>

That was the code, I just added these lines

.tabs {
  display: flex;
  flex-wrap: wrap;
}
.tab {
  order: 0;
}
.tab-content {
  order: 1;
  width: 100%;
}

By doing so, the tabs are gonna shrink by default, since they're flex-children, and the tab content wants to take 100% of the parent, so I added the flex wrap to make it go on another line, and added the order to place .tab-content as the last element

[github-actions]

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

[Jeremy Chaufourier]

Hello, I have the same problem. The proposal is good.
I'd rather wait and see. It occurs on Safari (Mac and iOS) and only with the presence of the avatar component in the tab-content.

Here is my page: https://edge-components.jrmc.dev/avatar

[Alptuğ]

❤️