Widget header labels collide with live values at narrow widget widths

[mairas]

Two widgets draw a static header label and a large live value in the same
band, with no reflow when the widget gets narrow. Below a certain width the
two overlap and both become unreadable.

Seen while taking the new README screenshots (branch docs/readme-refresh,
commit af025b6).

Data Graph — title over value

The widget title (Barometer (24 h)) and the current value (1024.0 mbar)
are drawn on top of each other.

https://github.com/halos-org/skip/blob/af025b6a160806088e8acc130e6dad4ebce80dbb/images/dashboard-narrow.png — bottom row, middle tile.

Wind Trends — axis label over value, and tick labels into each other

TWS runs into 2.7, and the direction axis ticks (191 211° 231°
251 271°) run into one another.

https://github.com/halos-org/skip/blob/af025b6a160806088e8acc130e6dad4ebce80dbb/images/dashboard-dark-sailing.png — the lower widget.

Reproduce

1. Place a Data Graph widget and a Wind Trends widget on a page.
2. Narrow the browser window until each widget is roughly a third of a
   1000 px viewport wide.
3. The header label and the value overlap.

Notes

Both cases are a layout problem, not a legibility one: the text is full
size and simply lands in the same place. Issue #408 covers the related but
separate problem of label text becoming illegible on small canvas tiles.

Expected: the header and the value either share the row without overlapping,
or the header truncates or drops when there is not enough width for both.