Responsive on Tabs not working

[projct1]

Describe the bug

https://skr.sh/sQdaK1SWBck

But Tabs component on mobile looks bad: https://skrinshoter.ru/vQdQvqSNtiu

Option scrollable are not help

Reproducer

https://

PrimeVue version

4.0.0

Vue version

3.x

Language

ALL

Build / Runtime

Nuxt

Browser(s)

any

Steps to reproduce the behavior

1) Install base primevue 2) Copy basic example Tabs markup https://skr.sh/sQdCSlU1g2H 3) Switch dev tools to mobile

Expected behavior

Looks good on mobile.

[Azoorb]

Meet same issue with this code :

<Tabs v-if="active_tab" :value="active_tab.key" scrollable>
    <TabList>
        <Tab v-for="tab in filtered_tabs" :key="tab.label" :value="tab.key" @click="() => push_to_route(tab.key)">
            <div class="flex flex-row gap-2 items-center">
                <i :class="tab.icon" />
                <span>{{ tab.label }}</span>
            </div>
        </Tab>
    </TabList>
</Tabs>

[zooldeveloper]

Same issue

[leonardonicola]

I fixed my problem just messing around with min-width: 0 (min-w-0 on tailwind) of parent elements, it's a little css trick that ensures your content doesn't forcefully maintain its minimum width. In a flex layout, if child elements (like text or images) exceed the container’s width, they’ll push the flex container beyond its intended size. By setting min-w-0, you allow the element to "shrink" within the available space, causing the content to respect the container's boundaries.