fix(ui): prevent text overflow in vertical bar

[arqueon]

When the widget is placed in a vertical panel, the text pill (which originally rendered as ProviderName 85%) was too wide and caused horizontal overflow. This PR simplifies the vertical bar text to only show the numeric percentage (e.g., 85%), relying on the pill's background color to identify the provider. This ensures a clean layout in vertical environments.

[bernardopg]

Thanks for the PR, i will review it tomorrow. Cya. @arqueon

[bernardopg]

Thanks @arqueon — reviewed and tested locally against current main (v1.4.1 + the new docs): qmllint clean, plugin reloads fine, and the horizontal pill renders correctly with the new progress ring.

Verdict: accepting. Notes from the review:

1. Core fix (vertical pill → percent-only) is right; ProviderName NN% indeed overflows narrow vertical bars, and severity stays readable through the ring color (heroAccent is usage-based) while the accent color identifies the provider.
2. The PR also changes hero-provider selection to prefer pinned providers and recolors the horizontal dot by provider accent — slightly beyond the title's scope, but both are coherent with the identity-via-color approach, so they're going in as-is.
3. The 20×20 Canvas ring block is duplicated verbatim in both pill variants, and its accent property is declared but onPaint reads root.heroAccent directly. I'll dedupe it into a shared inline component in a follow-up commit right after merging, so no action needed on your side.

Merging now — thanks for the contribution!