Estoy usando una barra de navegación en mi aplicación Vue/Vuetify y agregué un componente v-app-bar-title para mostrar el nombre de la página en la que se encuentra el usuario. Sin embargo, cuando cargo ciertas páginas, el texto del título se trunca y solo se corrige si vuelvo a cargar la página. Aquí hay un ejemplo de lo que quiero decir, agregué un borde rojo al elemento para mostrar que el texto debería tener suficiente espacio:

Si vuelvo a cargar la página, el mosaico vuelve a la normalidad:

Intenté agregar text-overflow: show property al elemento, pero esto no pareció tener ningún efecto. También agregué una propiedad min-width , pero esto no logró cambiar el comportamiento del título.

EDITAR: Incluyendo un pequeño código adicional:

Aquí está el componente de título que estoy usando:

 <v-app-bar-title class="title" >{{ title }}</v-app-bar-title>

Y aquí está el CSS para ello:

 .title { flex-grow: 10; color: var(--text-reverse); text-overflow: show; // border: 1px solid red; }

Encontré una solución simplemente reemplazando el componente v-app-bar-title con un span , pero eso parece barato y me gustaría poder utilizar la mayor cantidad posible de vuetify.