Minimum tab width to support iPhone 5 screen width

Ionic Framework ionic-v3
1

When I run 5 tabs on an ionic 2 app in an iphone 5s emulator, it has wide margins between the icons and it cuts off the first and last icon off screen. Where should I set the minimum width and margins to support the smaller screen? Which scss file?

Also, shouldn’t we reduce the minimum width to support 5 tabs on a smaller scree? It looks like there is plenty of space.

<ion-tabs>
  <ion-tab [root]="tabFavesRoot" tabTitle="Faves" tabIcon="heart"></ion-tab>
  <ion-tab [root]="tabPeopleRoot" tabTitle="People" tabIcon="people"></ion-tab>
  <ion-tab [root]="tabHostGameRoot" tabTitle="Create" tabIcon="add-circle"></ion-tab>
  <ion-tab [root]="tabMessagesRoot" tabTitle="Messages" tabIcon="chatbubbles"></ion-tab>
  <ion-tab [root]="tabMyProfileRoot" tabTitle="My Profile" tabIcon="person"></ion-tab>
</ion-tabs>
2

I came across the same issue a while ago, what I did to resolve it was adding the following css rules to the .tab-button css class;

.tab-button {
    font-size: 10px !important; // tweaked the font a bit
    min-width: unset !important; // basically removed min-width
}

Make sure the properties are set. I haven’t tested this just now but I believe this was the solution to my identical problem.

I applied those css rules in app.variables.scss

3

This has been reported and fixed by the Ionic team. It will be released in the next beta.