Encountering an issue with using v-badge and v-tab when dealing with large numbers in a v-badge.
Managed to find a CSS workaround by setting width: auto; for adjusting the size of v-badge to accommodate huge numbers, but now facing an overlap with my v-tab content due to expansion in the wrong direction.
Seeking advice on how to prevent my v-badge content from overlapping my v-tab content?
HTML
<div id= "app">
<v-app id= "inspire">
<v-tabs fixed-tabs>
<v-tab
v-for= "n in 3"
:key= "n"
>
<v-badge color= "secondary">
<span>Test</span>
<span slot= "badge"> 15000 </span>
</v-badge>
</v-tab>
</v-tabs>
</v-app>
</div>
CSS
.v-badge__badge{
width:auto;
border-radius: 12px;
padding: 5px 10px;
margin-left: 20px
}
JS
new Vue({
el: '#app'
})