问如何避免在离子标签栏后面隐藏最后一项？

EN

<ion-footer>
  <ion-tabs>  
    <ion-fab  routerLinkActive="router-link-active"  vertical="bottom" horizontal="center" translucent="true">
      <ion-fab-button [routerLink]="['/create-event']">
        <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-fab>
    
    <ion-tab-bar slot="bottom" class="ion-no-border">
      <ion-tab-button tab="tab-encounters">
        <!-- <ion-icon name="home"></ion-icon> -->
        <img src="../../assets/22.png" alt="">
      </ion-tab-button>
  
      <ion-tab-button tab="tab-conversations" class="comments">
        <!-- <ion-icon name="chatbubbles"></ion-icon> -->
        <img src="../../assets/27.png" alt="">

        <!-- <ion-badge *ngIf="new_message">{{new_message}}</ion-badge> -->
      </ion-tab-button>
  
      <svg height="50" viewBox="0 0 100 50" width="100" xmlns="http://www.w3.org/2000/svg"><path d="M100 0v50H0V0c.543 27.153 22.72 49 50 49S99.457 27.153 99.99 0h.01z" fill="red" fill-rule="evenodd"></path></svg>
  
      <ion-tab-button tab="tab-notifications" class="notifs">
        <!-- <ion-icon name="notifications"></ion-icon> -->
        <img src="../../assets/28.png" alt="">

        <!-- <ion-badge *ngIf="new_activities">{{new_activities}}</ion-badge> -->
      </ion-tab-button>
  
      <ion-tab-button tab="tab-profile">
        <ion-icon name="person"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-footer>

ion-tabs{
//  margin-top: 10px;
    ion-fab {
        // margin-bottom: env(safe-area-inset-bottom); /* fix notch ios*/
        ion-fab-button {
            --box-shadow: none;
      --background:var(--ion-color-tertiary);
      font-size:20px;
        }
    }
    ion-tab-bar {
        --border: 0;
        // --background: transparent;
        position: absolute;
        bottom: 0;
        left:0; right: 0;
        width: 100%;
        &:after{
            content: " ";
            width: 100%;
            // bottom: 0;
            background: var(--ion-color-light);
            height: env(safe-area-inset-bottom);
            position: absolute;
        }
        ion-tab-button {
            --background: var(--ion-color-light);
        }
        ion-tab-button.comments {
            margin-right: 0px;
            border-top-right-radius: 18px;
        }
        ion-tab-button.notifs {
            margin-left: 0px;
            border-top-left-radius: 18px;
        }
        svg {    
            width: 72px;
            margin-top: 19px;
            path{
                fill:  var(--ion-color-light);
            }       
        }
    }
}

 <ion-card style="box-shadow: none;" *ngIf="segmentModel === 'events'">
    <img style="display: block;" src="../../assets/1@2x.png" alt="">
  <div class="captiondiv">
    <ion-text color="dark" class="caption">Music Party & Drinks</ion-text>
  </div>
  <div class="datediv">
<ion-text color="medium" class="date"><ion-icon class="icon" name="location"></ion-icon>&nbsp;Ottawa,&nbsp;Canada&nbsp;|&nbsp;<span><ion-icon class="icon" name="calendar"></ion-icon>&nbsp;</span>23/03/2021&nbsp;&nbsp;9:30pm</ion-text>
  </div>
</ion-card>