q-bar elements do not wrap

[wpq]

I have a simple application which starts with a q-bar element and contains a few q-badge. These q-badges do not wrap when overflowing, is that normal?

The code I use:

<q-bar>
  <div>Monitoring</div>
  <q-badge color="green">{{nrAppsOK}} OK</q-badge>
  <q-badge :color="nrAppsKO===0?'green':'red'">{{nrAppsKO}} KO</q-badge>
  <q-badge
    align="middle"
    :color="monitoringIsLate ? 'red' : 'green'"
  >last run: {{lastRun.fromNow()}}
  </q-badge>
  <q-badge outline>commit: {{commit}}</q-badge>
</q-bar>

This is rendered on my phone as:

Please note that the rightmost badge is truncated. When I swipe the screen left, I see

There should be a badge next to the “last run” one, and indeed it is there, but “hidden”:

Everything is fine on a wider screen (or in landscape mode on my phone):

Is it normal that the badges do not wrap?