bug: ion-back-button text moves other elements out of toolbar

[pj035]

Bug Report

Ionic version:

[x] 5.x

Current behavior:

Using a longer text for ion-back-button shows the following problems:

• it is placed behind the ion-title (if exists)
• it moves other elements (like ion-buttons) out of the header

Expected behavior:

The back button's text is truncated somehow, e.g. with text-overflow: ellipsis.

Steps to reproduce:

1. Create a new app ionic start myApp blank
2. Add two new pages ionic generate page myPageX
3. Add
   • ion-back-button with a long text to both pages
   • some ion-title to one page
   • some ion-buttons with slot=end to the end of the header's toolbar
4. Open those pages on a small screen device (e.g. iPhone SE). You will see the problem.

Related code:

See repository for example: https://github.com/pj035/ionic-issue-back-button-long-test

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/home" text="Some long back button text 12">
      </ion-back-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="search" slot="icon-only"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon name="person" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Other information:

Could be related to https://github.com/ionic-team/ionic/issues/8700.

Ionic info:

$ ionic info

Ionic:

   Ionic CLI                     : 6.6.0 (/home/philipp/.nvm/versions/node/v10.18.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Utility:

   cordova-res (update available: 0.13.0) : 0.11.0
   native-run (update available: 1.0.0)   : 0.3.0

System:

   NodeJS : v10.18.0 (/home/philipp/.nvm/versions/node/v10.18.0/bin/node)
   npm    : 6.13.4
   OS     : Linux 5.6

Notes

I'm not sure yet if this a bug report or rather a feature request. I could imagine a solution, which provides the developer some more flexibility, like setting a max-width for the back button (text), that automatically truncates the text then.

PS: I could image to contribute here, but at first I want to wait how its best to proceed on such an issue (fixing or new feature).

[LennonReid]

Any updates?