Hi
I have been using the card since 2021, but I have a problem since the latest HomeAssistant Core 2024.6.x update (I think it's from 2024.6.4).
when I use it inside a picture-elements and beyond a certain percentage of size in the card style, and it happens as seen in the image.

I tried both from a PC (but it does this if I reduce it to a window beyond a certain size) and from a tablet, and depending on the size of the screen beyond a certain percentage of reduction it breaks.
I've done some tests but I can't keep the card in the right square shape.
I attach the code of a simple test,
on my tablet the width percentage below 20% gives me the problem of the image above
`type: picture-elements
image: /local/floorplan/BGwhite.png
elements:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:tesla-style-solar-power-card
name: []
house_entity: sensor.powerwall_load_now
grid_entity: sensor.tesla_card_grid_consumption
battery_entity: sensor.tesla_card_battery_consumption
generation_entity: sensor.powerwall_solar_now
generation_to_grid_entity: sensor.tesla_card_grid_feed_in
generation_to_house_entity: sensor.tesla_card_solar_consumption
generation_to_battery_entity: sensor.tesla_card_battery_charging
battery_to_house_entity: sensor.tesla_card_battery_consumption
grid_to_house_entity: sensor.tesla_card_grid_consumption
battery_extra_entity: sensor.powerwall_charge
grid_icon: mdi:transmission-tower
generation_icon: mdi:solar-power
house_icon: mdi:home
battery_icon: mdi:battery
threshold_in_k: 1
change_house_bubble_color_with_flow: 1
hide_inactive_lines: 1
show_gap: true
style:
top: 50%
left: 50%
width: 19%
'--ha-card-background': rgba(0,0,0,0.5)
'--ha-card-border-radius': 30px
`
I don't know how to fix it, what can I try?
Hi

I have been using the card since 2021, but I have a problem since the latest HomeAssistant Core 2024.6.x update (I think it's from 2024.6.4).
when I use it inside a picture-elements and beyond a certain percentage of size in the card style, and it happens as seen in the image.
I tried both from a PC (but it does this if I reduce it to a window beyond a certain size) and from a tablet, and depending on the size of the screen beyond a certain percentage of reduction it breaks.
I've done some tests but I can't keep the card in the right square shape.
I attach the code of a simple test,
on my tablet the width percentage below 20% gives me the problem of the image above
`type: picture-elements
image: /local/floorplan/BGwhite.png
elements:
mode: horizontal
cards:
name: []
house_entity: sensor.powerwall_load_now
grid_entity: sensor.tesla_card_grid_consumption
battery_entity: sensor.tesla_card_battery_consumption
generation_entity: sensor.powerwall_solar_now
generation_to_grid_entity: sensor.tesla_card_grid_feed_in
generation_to_house_entity: sensor.tesla_card_solar_consumption
generation_to_battery_entity: sensor.tesla_card_battery_charging
battery_to_house_entity: sensor.tesla_card_battery_consumption
grid_to_house_entity: sensor.tesla_card_grid_consumption
battery_extra_entity: sensor.powerwall_charge
grid_icon: mdi:transmission-tower
generation_icon: mdi:solar-power
house_icon: mdi:home
battery_icon: mdi:battery
threshold_in_k: 1
change_house_bubble_color_with_flow: 1
hide_inactive_lines: 1
show_gap: true
style:
top: 50%
left: 50%
width: 19%
'--ha-card-background': rgba(0,0,0,0.5)
'--ha-card-border-radius': 30px
`
I don't know how to fix it, what can I try?