victronenergy / venus-html5-app

HTML5 App including Javascript library that communicates with Venus OS over MQTT websockets
MIT License
102 stars 32 forks source link

Different size battery gauge #406

Closed martinbosma closed 1 week ago

martinbosma commented 2 weeks ago

In below screenshot the first battery gauge is bigger than the others, while the second one contains the same data, except for the name, image

mman commented 1 week ago

@martinbosma What simulation is that please and what OS/browser did you use to trigger it?

martinbosma commented 1 week ago

It's the bct simulation and I'm using Firefox. image

mman commented 1 week ago

Got it, happens only after the battery widget reaches certain size, but I can reproduce it in Safari as well as in Firefox.

https://github.com/user-attachments/assets/e9a19922-0931-4020-96d2-f1068439caab

The bigger green circle is 700pt at its maximum while the smaller ones are at 600pt when they break.

Screenshot 2024-09-11 at 14 55 25

Looks like the flex layout is getting confused by the labels where first one captures more space and therefore determines what would be the size of the circle. /me going to learn about the flex box thingy.