How to fit tab to its text?

Question

I use Quasar framework and I'm struggling with adjusting q-tab size to its label name. I have 3 tabs and as you can see below their size is much bigger than tab's label:

I tried to add shrink or dense or narrow-indicator both to q-tabs and q-tab but it doesn't change anything. I followed official documentation, have no idea what's wrong with it:

<template>
<q-layout view="hHh lpr fFf" >
    <q-header>
        <q-toolbar>
            <q-img
                src="~assets/logo.png"
                fit="cover"
                width="120px"/>

            <q-space />
            <q-tabs                
                class="text-indigo-13 text-weight-regular">      
                <q-route-tab                    
                    v-for="tab in tab_links"
                    :key="tab.name"
                    :to="tab.route">
                    {{ tab.name }}
                </q-route-tab>
            </q-tabs>
        </q-toolbar>
    </q-header>
</q-layout>
</template>


<script>
export default {
name: 'Navbar',
data() {
    return {
        tab_links: [
            { name: 'Project', route: '/' }, 
            { name: 'Analysis', route: '/analysis' }, 
            { name: 'Settings', route: '/settings' }
        ]
    }
},
}
</script>

<style scoped>
.q-tabs {
    font-size: 9px;    
}

</style>

Answer 1

I did not manage to adapt q-route-tab to the inner text, but I could easily resize it using CSS.

<q-route-tab                    
    v-for="tab in tab_links"
    class="size"   <--------
    :key="tab.name"
    :to="tab.route">
    {{ tab.name }}
</q-route-tab>

...

<style scoped>
  .size {
    width: 100px;
  }
</style>