I am currently working on a Vue application that utilizes a Vuetify "bottom navigation" component as shown below:
<v-bottom-navigation
app
fixed
grow
color="#121212"
class="bottom-navigation"
>
<v-btn text tile v-for="menuItem in menuItems()" :key="menuItem.name" :to="{ name: menuItem.name }" exact>
<span>{{ menuItem.title }}</span>
<v-icon>mdi-{{ menuItem.icon }}</v-icon>
</v-btn>
</v-bottom-navigation>
When running the application on my local node test server, it displays correctly:
https://i.sstatic.net/GcKpA.png
However, when I build the application using vue-cli-service build and deploy it to my QA server, the layout appears incorrect:
https://i.sstatic.net/lFc9S.png
Upon inspecting the developer tools, I noticed that the issue stemmed from the CSS rule defining the height of each button link as "inherit" loading after the CSS rule setting it to 36px high. This ordering discrepancy is causing the problem as it needs to be set to 'inherit' for the CSS to display properly.
Desired order:
https://i.sstatic.net/qkaIT.png
Undesired order:
https://i.sstatic.net/8QxAC.png
Therefore, my question pertains to why this sequencing error is occurring. Could it be a bug within Vuetify or perhaps an issue with how the CSS files were packaged? As someone new to vue-cli development, I am uncertain where to begin troubleshooting this. Any assistance or pointers would be greatly appreciated. Thank you!