[manuelmayer-dev]

Summary

The red Live and grey Offline pill in the Twitch and YouTube Stream Stats widgets sat visibly left of centre. Inside the pill, the space before the dot was 0.2em and the space after the label was 0.3em, and the label's own right side bearing adds a little more on top of that. The spacers are now 0.25em before the dot and 0.2em after the label, so the dot and label sit centred in the pill.

The pill's vertical offset seen in the website screenshots is not changed here. It comes from how those screenshots were captured: a 2x1 tile in the Overview style, scaled up, with the device scale emulated over CDP. Rendered at a real device scale factor, the text is within 1 to 2 px of centre, apart from a small offset in that 2x1 tile at scale 1.

Testing

• Rendered the real widget tree (Overview, LiveRow and ValueGraph, live and offline) with the ui/runtime renderer in Chromium at 1x, 2x and 3x, and measured the pill padding in the captures. Overview at 3x went from 31/38 px left/right to 33/34 px. LiveRow and ValueGraph are within 1 px.
• Measured a test pill with the translated labels (Live, Offline, 配信中, オフライン, В эфире, Canlı, Hors ligne, En directo, Živě, 라이브): all within 2 px.
• Re-shot the website screenshots of both widgets on a host built from this commit, using Chrome's --force-device-scale-factor=3. At 3x the pill now measures 29/30 px left/right and 14/14 px top/bottom; it was 27/36 and 5/17 before.
• Twitch, YouTube and Streaming unit tests in MacroDeckHost.Tests.UnitTests: 619 passed.

Notes

• I also tried centring all widget text on its capital height in renderer.css with text-box-trim, keeping every box the same size. I dropped it because Chromium then counts the trimmed space as overflow, which breaks content-fit and first-fit: 7 desktop-ui specs failed. That is not part of this PR.
• Measured in a 2x1 Overview tile at device scale 1, the label sits about 2 px high (top/bottom 2 and 7 px in a 16 px pill), because small text snaps to whole pixels. Larger tiles and higher scales are within 1 to 2 px.

Checklist

• Tests were added or updated where needed
• The change was verified manually where appropriate
• Documentation was updated if the change affects documented behaviour
• I reviewed and understand every submitted change