Gauge improvements

[silamon]

Proposed change

Back to dynamically changed font-size to match longer units.
Different needle (rounded arrow, but shorter)
Fixed the case when min is not the first 0 from.
Padding tweaks to make it like before but still better.
Back to butt rounding since smaller rounded corners require heavier calculation.

Fixes #30345
Fixes #30333

Screenshots

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:
• Link to developer documentation pull request:
• Link to backend pull request:

Checklist

• I understand the code I am submitting and can explain how it works.
• The code change is tested and works locally.
• There is no commented out code in this PR.
• I have followed the development checklist
• I have followed the perfect PR recommendations
• Any generated code has been carefully reviewed for correctness and compliance with project standards.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

To help with the load of incoming pull requests:

• I have reviewed two other open pull requests in this repository.

[silamon]

I'm going to spend more time on this to let it look like this:

[Mariusthvdb]

please also consider allowing control of the color of the needle. During beta we discovered it can be very difficult to see when on a darker severity color.
Maybe auto set it to contrast the severity color

would be great if we could set a theme var to it so it isnt always black, but follows our themed designs

[bramkragten]

I think adding a border around the needle, like in the screenshot posted would fix this.

[Mariusthvdb]

yes that is a certain improvement indeed. looking forward to that.

the needle being black always and not following a themed variable makes it that stand out rather harshly against a text that does follow eg primary-text-color in the theme.

I can open a FR if you need that, but figured while in the process of follow-through here could suffice.

[silamon]

[Ainndy]

Inconsistent Font Scaling: The scaling logic for 2-digit vs. 4-digit numbers is too aggressive, leading to disproportionate font sizes that look uncoordinated. In v2026.3, the gauge text was a consistent 50px.

Static Text Positioning: When resizing the card, the text position remains fixed instead of scaling proportionally with the gauge arc. This causes the gap between the gauge scale and the text to stretch awkwardly as the card gets larger, breaking the visual balance.

hapcb.mp4

[silamon]

Inconsistent Font Scaling: The scaling logic for 2-digit vs. 4-digit numbers is too aggressive, leading to disproportionate font sizes that look uncoordinated. In v2026.3, the gauge text was a consistent 50px.

Static Text Positioning: When resizing the card, the text position remains fixed instead of scaling proportionally with the gauge arc. This causes the gap between the gauge scale and the text to stretch awkwardly as the card gets larger, breaking the visual balance.

hapcb.mp4

This is what it was in 2026.3:

It's the same behavior as before and to be honest, also the same code I putted back in.

[Ainndy]

Inconsistent Font Scaling: The scaling logic for 2-digit vs. 4-digit numbers is too aggressive, leading to disproportionate font sizes that look uncoordinated. In v2026.3, the gauge text was a consistent 50px.
Static Text Positioning: When resizing the card, the text position remains fixed instead of scaling proportionally with the gauge arc. This causes the gap between the gauge scale and the text to stretch awkwardly as the card gets larger, breaking the visual balance.
hapcb.mp4

This is what it was in 2026.3:

It's the same behavior as before and to be honest, also the same code I putted back in.