Horizontal buttons stack - 4th button getting no style tag applied

[caraar12345]

Describe the bug
When there are more than 3 buttons in the horizontal stack, those past the 3rd end up overlapping the 1st. Looking at dev tools, this is because no style attribute applied to the buttons (and therefore no translateX instructions). Therefore, the only buttons that can be used are the second, third and the last button (which ends up on top); the first has been covered by all of the buttons past number 3.

To Reproduce
Steps to reproduce the behavior:

1. Create a horizontal button stack
2. Add more than 3 buttons to it
3. Notice that you can't access the 1st page

Expected behavior
The buttons to sit in a horizontal line and not overlap each other.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Version: 120.0.6099.225

Smartphone (please complete the following information):

• Device: iPhone 15 Pro Max
• OS: iOS 17.2
• Browser: Home Assistant Companion App
• Version: 2024.1 (2024.534)

Additional context
My card configuration YAML:

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_name: Front
1_icon: mdi:sofa-single
1_link: '#front-room'
1_entity: light.front_room_light
2_name: Middle
2_icon: mdi:desk-lamp
2_link: '#middle-room'
2_entity: light.middle_room_light
3_name: Libby's
3_icon: mdi:bed
3_link: '#libbys-bedroom'
3_entity: light.libby_s_bedroom_light
4_name: Aaron's
4_icon: mdi:bed
4_link: '#aarons-bedroom'
4_entity: light.aarons_bedroom_lamp

Thank you! 🍻

[Clooos]

Hi, I'm unable to replicate this issue, I have more buttons than that and everything is working has it should. You can try to open the editor or to clear your cache to let the buttons be recalculated.

[Clooos]

I've just tried your code and this issue is only happening when an entity is undefined, have you checked that?

Edit: When I remove the entities: