tabbar with five tabs does not show tabs at corner properly in ionic

Question

My app has a tabbar with five tabs. But the tabs at the corner are not showing properly.

Code for tabbar in html file is:

<ion-tab-bar slot="bottom">
<ion-tab-button tab="user">
  <ion-icon class="tab-icon" src="./assets/icon/user-icon.svg"></ion-icon>
  <ion-label> user</ion-label>
</ion-tab-button>
<ion-tab-button tab="history">
  <ion-icon
    class="tab-icon"
    src="./assets/icon/history-icon.svg"
  ></ion-icon>
  <ion-label>Histroy</ion-label>
</ion-tab-button>

<ion-tab-button tab="Village">
  <ion-icon
    class="tab-icon"
    src="./assets/icon/village-icon.svg"
  ></ion-icon>
  <ion-label>village</ion-label>
</ion-tab-button>

<ion-tab-button tab="control">
  <ion-icon
    class="tab-icon"
    src="./assets/icon/Control-icon.svg"
  ></ion-icon>
  <ion-label>Control</ion-label>
</ion-tab-button>

<ion-tab-button tab="Suppport">
  <ion-icon
    class="tab-icon"
    src="./assets/icon/support-icon.svg"
  ></ion-icon>
  <ion-label>Support</ion-label>
</ion-tab-button>

code for tabbar in scss file:

.tab-icon {
    zoom: 0.7;
}
ion-tab-button {
   --color: #000000;
   --color-selected: rgba(80, 158, 47, 0.9);
   // Background
   --background: white;
   --background-focused: white;
   --ripple-color: white;
}

If someone has faced similar problem and solved the issue then please guide me.

Answer 1

This issue can be solved by setting maximum width and font size of tab button, such as :

ion-tab-button {
   --color: #000000;
   --color-selected: rgba(80, 158, 47, 0.9);
   // Background
   --background: white;
   --background-focused: white;
   --ripple-color: white;
   max-width: 80px;
   font-size: 6pt;
   font-family: Arial;
}