gauge font size inside a horizontal stack is unstable

[0ki]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.
• [ ] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

gauge card text size is jumping around

Describe the behavior you expected

text should not change after a page has loaded (unless maybe the number of digits changes)

Steps to reproduce the issue

1. Add a gauge card to a sensor that fluctuates between 220-250

What version of Home Assistant Core has the issue?

core-2024.8.2

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0

Which operating system are you using to run this browser?

No response

State of relevant entities

No response

Problem-relevant frontend configuration

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: gauge
        .....
      - type: gauge
        entity: sensor.power_total_power
        name: Current load
        severity:
          green: 0
          yellow: 350
          red: 1500
        min: 0
        needle: false
        max: 6000
  - type: history-graph
    .....

Javascript errors shown in your browser console/inspector

No response

Additional information

[ildar170975]

Confirmed. 2024.8.2, Chrome in Win10 MWE:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_number.test_level_1
  - type: horizontal-stack
    cards:
      - type: glance
        entities:
          - input_number.test_level_1
      - type: gauge
        entity: input_number.test_level_1

Suggest to reflect in the issue's title that this happens when the Gauge card is placed inside a Horizontal stack.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[ildar170975]

up

[ildar170975]

This is not about a horiz stack:

1. Add a new view, set "panel" mode.
2. Add a new Gauge card.
3. Resize a window, make it small.
4. To make a viewport even smaller - open Code Inspector by F12 (Chrome, or a similar tool in your browser).
5. Start playing with a source entity:

When a card is "small" - the glitch appears: a value is changed -> _rescale_svg is called -> viewBox is redefined & changed-> size of svg element is changed. When a card is "big" - viewBox is not changing (probably also redefined - but it's value is same) -> size of svg element is NOT changed.