fix(disk): stop the disk card text overflowing and tidy up the chart

[karlitschek]

The device name spilled out through the right border of the card. The text column was flex: 1 0 auto, so it could never shrink below its max-content width, and a device name like ubuntu--vg-ubuntu--lv offers no break opportunity. The word-break that would have caught it only lived inside the width <= 1280px media query, so it was a wide-window-only bug.

The cards also sized themselves off the viewport via col-4, but the settings pane is much narrower than the window, so each card got a third of an already narrow column and every label wrapped. They are now an auto-fill grid that measures the container it actually sits in.

Label/value pairs became a dl. They previously relied on the whitespace between two adjacent spans, which Vue's whitespace: 'condense' removes outright when it contains a newline, rendering "Available:25.76 GB". Core styles dl/dt/dd for prose (dt,dd{padding:12px}, dt{width:130px}), which adds 24px to every row of a compact stat list, so that is reset here.

While in the chart itself:

• Drop the default white slice border, which cut visible gashes through the ring on dark themes, in favour of spacing between the arcs.
• Read both arc colours from the theme, so they match the dots in front of the "Used"/"Available" labels instead of a hardcoded grey that did not.
• Put the usage percentage in the hole rather than leaving it empty.
• Re-enable tooltips.
• Let the container drive the canvas size instead of inline width/height attributes fighting Chart.js' own sizing.
• Label the canvas for screen readers.

🤖 AI (if applicable)

• The content of this PR was partly or fully generated using AI