Further improve mobile stats

[nrenner]

Follow-up to #298

When the screen is too small to fit the stats into a single line, the stats are still wrapping into two lines, but now within the fields, breaking apart numbers and units (!), instead of wrapping flex elements as before. See Galaxy S8 (360px viewport width) screenshot on master:

For comparison:

Galaxy S8 (360px viewport width) on brouter.de (v0.11.1):

Screenshot from #298:

Ideas:

• still allow flex wrapping as before when no space is left
  • only show first line (invisible overflow) + button to expand to full height
• enable horizontal overflow/scrolling
• remove .stats-label { word-break: break-all; for proper word breaking at separator
  (I think that was needed to wrap flex elements instead of the content)

Another issue:

• no minimal space/margin between the elements
  (observable in desktop Chrome/Chromium device toolbar with device set to "Responsive" and then dragging the handles to change screen size)

[bagage]

* remove `.stats-label { word-break: break-all;` for proper word breaking at separator
  (I think that was needed to wrap flex elements instead of the content)

I wasn't sure if that class was still needed since I wasn't sure what it tried to fix. But I do think we can remove it.

* no minimal space/margin between the elements
  (observable in desktop Chrome/Chromium device toolbar with device set to "Responsive" and then dragging the handles to change screen size)

That was on purpose, because adding spaces prevent info from fitting on a single row on smaller screen - and the main idea was to put on a single row as much as possible (too much height is lost when a second row is created). But I think some proper UI/UX should be done to fix that.

[nrenner]

I get that the previous layout was wrapping too early, but now there isn't even a single pixel between the fields, e.g. distance and time, there should still be some margin/padding at least as wide as between number and unit:

What do you have in mind as a proper UI/UX?

[bagage]

Yeah maybe a space is fine, but actually I was more looking at a redesign with proper field separator, for instance Material uses chips:

(but it consumes more spaces obviously).

I think some fields should be hidden/removed on smaller screen (for instance energy), or make the bar horizontally scrollable? We definitely need some UX guidance on that :).

[nrenner]

I guess part of what you mean is what I have in mind also for a larger layout improvement of the stats.

The current " | " separator makes it more obvious than the brackets we had before, that headings and numbers are not aligned. The flex elements should really be a table or grid with headings and numbers as rows and one, two or more stats as columns, forming a group.

Both the columns (or single fields without heading) and groups could then be highlighted with a slightly different background color or separated by border CSS instead of " | ", which probably would be more clear and therefore require less spacing.

[nrenner]

As a quick fix I added flex-wrap to wrap like before, but only when there is no space left, instead of the hard character break, and some minimal margin, see ebaba66. The layout of your screenhot in #298 stays the same.