Ionic tabs don't fit on Android physical devices but fit on emulators and iPhones


I am migrating an old ionic angular App. I have the App running on iPhones and both iPhone emulator through Xcode and Android emulator through Android Studio. But when I deploy that to Android physical device from the same Android Studio, the ionic tabs don’t fit in the tab bar on the Android physical device. I have 7 tabs and about half a tab on each side gets cut off with 5 showing in between. I have tried this on a Samsung 22 phone and also on an old Xiaomi device - both have the same problem.

I have tried to search around for this issue but couldn’t find anything so far.

My ionic info output is below


Ionic CLI : 7.1.1 (/Users/username/.nvm/versions/node/v20.2.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.6.1
@angular-devkit/build-angular : 12.2.18
@angular-devkit/schematics : 12.2.18
@angular/cli : 12.2.18
@ionic/angular-toolkit : 5.0.3


Capacitor CLI : 3.9.0
@capacitor/android : 3.9.0
@capacitor/core : 3.9.0
@capacitor/ios : 3.9.0


Cordova CLI : 12.0.0 (cordova-lib@12.0.1)
Cordova Platforms : android 9.1.0, browser 6.0.0, ios 6.2.0
Cordova Plugins : cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)


cordova-res : 0.15.4
native-run (update available: 1.7.3) : 1.7.1


ios-sim : 8.0.2
NodeJS : v20.2.0 (/Users/username/.nvm/versions/node/v20.2.0/bin/node)
npm : 9.6.6
OS : macOS Unknown
Xcode : Xcode 15.0 Build version 15A240d

Android Studio is Giraffe 2022.3.1 Build #AI-223.8836.35.2231.10406996, built on June 28, 2023

Not quite sure how to address/fix this issue. Appreciate any help/pointers.