Hello,
The current Gauge Card comes with a fixed padding in the ha-card element of 16px, which looks good at large sizes, but takes way too much space when the gauge is small – e.g. as a child of a Grid Card.
ha-card {
(...)
padding: 16px;
(...)
}
It would be great if the padding was dynamic instead, using perhaps percentages? This would allow it to automatically adjust to the containing box size:
ha-card {
padding: 2%;
}
(sorry, can't add "after" image due to silly restriction)
The same is true for the Name text displayed below the gauge, which is currently hard-coded as font-size: 15px, but that would require an extra wrapping element to reduce the size as it seems to be generic .name class.
I’m sure the result can be achieved with custom cards as well, but making the default ones more flexible and dynamic should be a good design improvement overall.
Thank you!