Double line below tab when using badge in PrimeVue

I have the following vue code using PrimeVue.

<template>
    <!-- OTHER STUFF HERE -->
    <TabView>
        <TabPanel>
            <template #header>
                <div class="flex align-items-center gap-2">
                    <i class="pi pi-envelope" />
                    <span>FOO</span>
                    <Badge :value="2" severity="danger" />
                </div>
            </template>
        </TabPanel>
        <TabPanel>
            <template #header>
                <div class="flex align-items-center gap-2">
                    <i class="pi pi-envelope" />
                    <span>BAR</span>
                    <Badge :value="20" severity="danger" />
                </div>
            </template>
        </TabPanel>
        <!-- <TabPanel>
            <template #header>
                <div class="flex align-items-center gap-2">
                    <i class="pi pi-envelope" />
                    <span>BAZ</span>
                </div>
            </template>
        </TabPanel> -->
    </TabView>
    <!-- OTHER STUFF HERE -->
</template>

The code above is working as intended (see below):

But then, when I add a new <TabPanel> with no <Badge> (the commented part in the code above), The result is weird (see below):

As you can see, there is a double line in there. So, currently i have 2 options, either I use badge on all the tab header or not use badge at all.

Currently, this is my attempt:

Which doesn't look too bad, but I would prefer to remove the double line when the tab has no badge.

Any idea how to fix this?

The tabs all have a bottom border, but when the heights are equal you don't see them individually. A tab without a badge uses less height than the tabs with badges, so the bottom borders becomes misaligned. You need to use CSS to set heights on your tabs to be equal.

For a scoped styling, this should work:

<style scoped>
.p-tabview :deep(.p-tabview-header-action) {
  height: 50px;
}
</style>

stackblitz example