View Badge with HA update entity shows truncated image

[Mariusthvdb]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• 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

could also be exaggerated because of the roof top shape of the icon.

Describe the behavior you expected

seems the circular icon would fit those entities better?

Steps to reproduce the issue

1. use yaml from the editor screen above

...

What version of Home Assistant Core has the issue?

2025.1.3

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue?

any

Which operating system are you using to run this browser?

sequoia 15.2

State of relevant entities

Problem-relevant frontend configuration

type: entity
show_name: false
show_state: true
show_icon: true
color: ""
entity: update.home_assistant_core_update
show_entity_picture: true

Javascript errors shown in your browser console/inspector

Additional information

No response

[ildar170975]

Strange, I cannot reproduce it with my update entities:

Running Container, cannot test with same entity.

[Mariusthvdb]

we had he same discussion before for this image in other places. The 'new' badge wasnt available at that time, but now exhibits the same effect, because of its explicit form factor of the HA images.

in fact all if the non circular images are truncated to the circular space (check your own terminal image 2nd on the left)

If they overflow the placeholder with their image ,they'll look bad

when only the background is truncated, like on HACS or Ubiquiti they look just fine:

suppose this would argue for a stricter form factor requirement for the images: have the essential visual element fit within the circle.

especialy so for the HA images, which now look like those wiggly roly poly toys that always return to their upright position

[ildar170975]

Assume we are talking about other UI elements which use state-badge.
Currently for update entity a border-radius: 0, for camera & media_player - 8%, for other domains - 50%.
Imho, if an entity has entity_picture then a state-badge element should not have border-radius: 50%, it should be more "square-ish". In this case we have a minimal amount of image lost.

The new badges are based on mushrooms which are "round-ish" - so every image has to be rounded too.
The "modern" trend of using round avatars is sick since it makes many images looking bad & forces users to adapt existing images to a smaller area.