Horizontal Button Stack stacking all icons on top of each other

Running Bubble-Card 1.7.3 Seeing issue on both IOS companion app & desktop (using chrome)

For some time, occassionally all of the icons in my horizontal button stack would shift and end up stacked on top of each other. It always resolved itself with a refresh of the screen. However, since updating to 1.7.3 (I was on 1.6.2 I believe prior), they appear stacked on top of eachother and no amount of cache clearing or screen refreshing is fixing the issue.

Thanks for all your work on this!!!!

Screen Shot 2024-03-08 at 9 23 47 AM

Card YAML type: custom:bubble-card card_type: horizontal-buttons-stack auto_order: true 1_icon: mdi:bird 1_link: '#frigate' 2_icon: mdi:remote-tv 2_link: '#remote' 2_entity: media_player.shield 3_icon: mdi:speaker-multiple 3_link: '#music' 3_entity: media_player.spotify_steph_tanner 4_link: '#fiona' 4_icon: mdi:cat 5_link: '#printer' 5_icon: mdi:printer-3d-nozzle rise_animation: false highlight_current_view: true

Full Dashboard YAML `title: Home views:

title: Home path: living Room type: custom:vertical-layout theme: Bubble cards:
- type: custom:button-card styles: card:
  - background: transparent
  - height: 90px grid:
  - grid-template-areas: >- "time day allergy allergy" "time date therm ltemp""time date therm htemp"
  - grid-template-columns: 2fr 4fr 1fr 1fr
  - grid-template-rows: 2fr 1fr 1fr custom_fields: allergy:
    - align-self: start
    - justify-self: end
    - margin-right: 5%
    - font-size: 12px
    - font-weight: 300
    - color: >- [[[ if (states["sensor.allergy_index_today"].state > 8) return "#BB1D1D"; if (states["sensor.allergy_index_today"].state > 6) return "#FF9E43"; else return "#32a852"]]] therm:
    - align-self: middle
    - justify-self: right
    - margin-right: '-25%' day:
    - align-self: end
    - justify-self: start
    - font-weight: 300 date:
    - align-self: start
    - justify-self: start
    - font-weight: bold time:
    - font-weight: 300
    - font-size: 40px
    - letter-spacing: '-1px' ltemp:
    - align-self: end
    - justify-self: end
    - font-size: 12px
    - margin-right: 5%
    - font-weight: 300 htemp:
    - align-self: end
    - justify-self: end
    - font-size: 12px
    - margin-right: 5%
    - margin-bottom: 5%
    - font-weight: 300 custom_fields: time: | [[[ return ${states['sensor.timeclean'].state} ]]] day: | [[[ return ${states['sensor.dayoftheweek'].state} ]]] date: | [[[ return ${states['sensor.date'].state} ]]]
- type: custom:mushroom-chips-card chips:
  - type: conditional conditions:
    - entity: binary_sensor.front_door_contact state: 'on' chip: type: template icon: mdi:door-open icon_color: red picture: '' content: Front entity: binary_sensor.front_door_contact tap_action: action: more-info hold_action: action: more-info double_tap_action: action: more-info
  - type: conditional conditions:
    - entity: binary_sensor.back_door_contact state: 'on' chip: entity: binary_sensor.back_door_contact type: template icon: mdi:door-sliding-open icon_color: red content: Back tap_action: action: more-info hold_action: action: none double_tap_action: action: none
  - type: conditional conditions:
    - entity: binary_sensor.basement_door_contact state: 'on' chip: type: template icon: mdi:door-open icon_color: red picture: '' content: Basement entity: binary_sensor.basement_door_contact tap_action: action: more-info
  - type: conditional conditions:
    - entity: binary_sensor.back_gate_contact state: 'on' chip: entity: binary_sensor.back_gate_contact type: template icon: mdi:gate-alert icon_color: red content: Back Gate tap_action: action: more-info hold_action: action: none double_tap_action: action: none
  - type: conditional conditions:
    - condition: state entity: binary_sensor.front_gate_contact state: 'on' chip: entity: binary_sensor.front_gate_contact type: template icon: mdi:gate-alert icon_color: red content: Front Gate tap_action: action: more-info hold_action: action: none double_tap_action: action: none
  - type: conditional conditions:
    - condition: state entity: binary_sensor.back_door_contact state: 'off'
    - condition: state entity: binary_sensor.front_door_contact state: 'off'
    - condition: state entity: binary_sensor.basement_door_contact state: 'off' chip: type: template icon: mdi:door-closed icon_color: green content: All Doors
  - type: conditional conditions:
    - condition: state entity: binary_sensor.back_gate_contact state: 'off'
    - condition: state entity: binary_sensor.front_gate_contact state: 'off' chip: type: template icon: mdi:gate icon_color: green content: All Gates tap_action: more-info
- type: custom:simple-weather-card entity: weather.forecast_home name: At Home
- type: horizontal-stack cards:
  - type: custom:button-card battery: sensor.steph_battery_level home_sensor: sensor.steph_to_home name: Steph entity: person.steph show_name: false show_state: false show_label: false show_icon: false show_last_changed: false show_entity_picture: true size: 100% styles: card:
    - border-radius: 12px
    - box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1)
    - border: | [[[ if (states["input_boolean.steph_in_a_meeting"].state === 'on') return "1px solid RGB(187, 29, 29)"; ]]] grid:
    - grid-template-areas: '"i home" "i battery" "i music"'
    - grid-template-columns: 1fr 3fr
    - grid-template-rows: min-content min-content 1fr img_cell:
    - align-self: middle
    - text-align: start entity_picture:
    - aspect_ratio: 1/1
    - border-radius: 100% custom_fields: battery:
      - align-self: middle
      - justify-self: start
      - padding-top: 5px
      - font-size: 12px
      - color: >- [[[ if (states["sensor.steph_battery_level"].state < 30) return "#e45649"; if (states["sensor.steph_battery_level"].state < 50) return "#ffa229"; if (states["sensor.steph_battery_level"].state < 101) return "#50A14F"; else return "#ffc640"]]] home:
      - align-self: middle
      - justify-self: start
      - font-size: 12px music:
      - align-self: start
      - padding-top: 5px
      - justify-self: start
      - font-size: 10px custom_fields: battery: | [[[ var i = states['sensor.steph_battery_level'].attributes.icon; var b = states['sensor.steph_battery_level'].state; return <span style='vertical-align: 1px'></span><ha-icon icon='${i}' style='width: 16px; vertical-align:2px'></ha-icon>${b}% ]]] home: | [[[ var homeState = states['person.steph'].state; var activityState = states['sensor.steph_activity'].state; var travelTime = states['sensor.steph_to_home'].state;
        
        if (homeState == 'home') { return <ha-icon icon="mdi:home" style="width: 16px; height: 16px; vertical-align: 1px"></ha-icon> Home; } else { var icon = activityState == 'Automotive' ? "mdi:car" : "mdi:home-import-outline"; return <ha-icon icon="${icon}" style="width: 16px; height: 16px; vertical-align: 1px"></ha-icon>${travelTime} min away; } ]]] music: | [[[ if (states['media_player.spotify_steph_tanner'].state == 'playing') return <ha-icon icon="mdi:volume-high" style="width: 16px; height: 16px; vertical-align: 1px"> </ha-icon>${ states['media_player.spotify_steph_tanner'].attributes.media_title } - ${ states['media_player.spotify_steph_tanner'].attributes.media_artist }
        
        else return <ha-icon icon="mdi:volume-mute" style="width: 16px; height: 16px; vertical-align: 1px"> </ha-icon> ]]] card_mod: style: | ha-card { --ha-card-background: transparent; }
  - type: custom:button-card entity: person.laura show_name: false show_state: false show_label: false show_icon: false show_last_changed: false show_entity_picture: true size: 100% styles: card:
    - border-radius: 12px
    - box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1)
    - margin-left: 5px grid:
    - grid-template-areas: '"i home" "i battery" "i music"'
    - grid-template-columns: 1fr 3fr
    - grid-template-rows: min-content min-content 1fr img_cell:
    - align-self: middle
    - text-align: start
    - padding-left: 3px entity_picture:
    - aspect_ratio: 1/1
    - border-radius: 100% custom_fields: battery:
      - align-self: middle
      - justify-self: start
      - padding-top: 5px
      - padding-left: 3px
      - font-size: 12px
      - color: >- [[[ if (states["sensor.game_day_battery_level"].state < 30) return "#e45649"; if (states["sensor.game_day_battery_level"].state < 50) return "#ffa229"; if (states["sensor.game_day_battery_level"].state < 101) return "#50A14F"; else return "#ffc640"]]] home:
      - align-self: middle
      - justify-self: start
      - font-size: 12px
      - padding-left: 3px music:
      - align-self: start
      - padding-top: 5px
      - padding-left: 3px
      - justify-self: start
      - font-size: 10px custom_fields: battery: | [[[ var i = states['sensor.game_day_battery_level'].attributes.icon; var b = states['sensor.game_day_battery_level'].state; return <span style='vertical-align: 1px'></span><ha-icon icon='${i}' style='width: 16px; vertical-align:2px'></ha-icon>${b}% ]]] home: | [[[ var homeState = states['person.laura'].state; var activityState = states['sensor.game_day_activity'].state; var travelTime = states['sensor.laura_to_home'].state;
        
        if (homeState == 'home') { return <ha-icon icon="mdi:home" style="width: 16px; height: 16px; vertical-align: 1px"></ha-icon> Home; } if (homeState == 'Patient Point') { return <ha-icon icon="mdi:desk" style="width: 16px; height: 16px; vertical-align: 1px"></ha-icon> Patient Point; } else { var icon = activityState == 'Automotive' ? "mdi:car" : "mdi:home-import-outline"; return <ha-icon icon="${icon}" style="width: 16px; height: 16px; vertical-align: 1px"></ha-icon>${travelTime} min away; } ]]] music: | [[[ if (states['media_player.spotify_laurasmilton'].state == 'playing') return <ha-icon icon="mdi:volume-high" style="width: 16px; height: 16px; vertical-align: 1px"> </ha-icon>${ states['media_player.spotify_laurasmilton'].attributes.media_title } - ${ states['media_player.spotify_laurasmilton'].attributes.media_artist }
        
        else return <ha-icon icon="mdi:volume-mute" style="width: 16px; height: 16px; vertical-align: 1px"> </ha-icon> ]]] card_mod: style: | ha-card { --ha-card-background: transparent; }
- type: custom:bubble-card card_type: separator name: Living Room icon: mdi:sofa
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: button entity: light.living_room_lights button_type: slider icon: mdi:lamps show_state: false name: Lights
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: light.living_room_table_lamp name: Table Lamp button_type: slider icon: mdi:lamp show_state: false
    - type: custom:bubble-card card_type: button entity: light.living_room_floor_lamp name: Floor Lamp button_type: slider icon: mdi:floor-lamp-torchiere-variant show_state: false
    - type: custom:bubble-card card_type: button entity: light.tv_backlight button_type: slider show_state: false name: TV LED icon: mdi:led-strip-variant
- type: entities entities:
  - entity: input_text.shield_pop_up_notification name: Send TV Notification secondary_info: none
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: separator name: Our Room icon: mdi:heart
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button entity: light.steph_bedroom name: Steffie button_type: slider icon: mdi:dog show_state: false
    - type: custom:bubble-card card_type: button entity: light.laura_bedroom name: Laura button_type: slider icon: mdi:cat show_state: false
  - type: custom:bubble-card card_type: separator
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: pop-up hash: '#remote' name: Living Room TV icon: mdi:television entity: media_player.shield state: media_player.shield back_open: true is_sidebar_hidden: true
  - type: custom:firemote-card entity: media_player.android_tv_192_168_0_112 device_family: nvidia-shield device_type: shield-tv-pro-2019 compatibility_mode: default android_tv_remote_entity: remote.shield defaultRemoteStyle_override: NS2 app_launch_1: plex app_launch_2: youtubeTV app_launch_3: espn app_launch_4: netflix visible_name_text: Shield name_position: hidden
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: pop-up hash: '#music' icon: mdi:music title: Steph Spotify state: media_player.spotify_steph_tanner name: Steph Spotify
  - type: horizontal-stack cards:
    - type: custom:bubble-card card_type: button button_type: slider entity: media_player.living_room_sonos show_state: true icon: mdi:speaker name: Living Room
    - type: custom:bubble-card card_type: button button_type: slider entity: media_player.den show_state: true icon: mdi:speaker
  - type: custom:mini-media-player entity: media_player.living_room_sonos artwork: full-cover source: icon toggle_power: false idle_view: when_idle hide: power: true name: true icon: true
- type: vertical-stack cards:
  - type: custom:bubble-card card-type: pop-up hash: '#frigate' name: Cameras icon: mdi:video card_type: pop-up
  - type: custom:frigate-card cameras:
    - camera_entity: camera.backyard
    - camera_entity: camera.front_door live_provider: ha go2rtc: modes:
      - webrtc view: default: live menu: style: overlay position: bottom alignment: top buttons: substreams: enabled: false clips: enabled: false timeline: enabled: false recordings: enabled: true frigate: enabled: false fullscreen: priority: 100 microphone: enabled: true priority: 100 type: momentary mute: enabled: true live: controls: builtin: false layout: fit: cover
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: pop-up hash: '#fiona' icon: mdi:cat name: Fiona
  - type: horizontal-stack cards:
    - type: entities entities:
      - entity: binary_sensor.cafe_fee_food_level name: Food Low
      - entity: sensor.cafe_fee_times_dispensed name: Meals Today
      - entity: sensor.cafe_fee_manually_dispensed name: Snicks Dispensed
      - entity: sensor.cafe_fee_dispensed name: Meals Dispensed
      - entity: button.cafe_fee_cancel_manual_feed name: Give Fee a snack! icon: mdi:exclamation-thick
- type: vertical-stack cards:
  - type: custom:bubble-card card_type: pop-up hash: '#printer' name: Elegoo state: sensor.elegoo_current_print_state icon: mdi:printer-3d-nozzle
  - type: custom:mushroom-entity-card entity: sensor.elegoo_current_display_message name: Display Message icon: mdi:printer-3d-nozzle secondary_info: state
  - type: custom:mushroom-entity-card entity: sensor.elegoo_extruder_temperature tap_action: action: none hold_action: action: none double_tap_action: action: none primary_info: name secondary_info: state icon: mdi:printer-3d-nozzle-heat icon_color: orange name: Extruder Temp
  - type: custom:mushroom-entity-card entity: sensor.elegoo_bed_temperature tap_action: action: none hold_action: action: none double_tap_action: action: none icon: mdi:heating-coil icon_color: orange primary_info: name fill_container: false name: Bed Temp
  - type: horizontal-stack cards:
    - type: custom:mushroom-entity-card entity: sensor.elegoo_progress name: Progress
    - type: custom:mushroom-entity-card entity: sensor.elegoo_print_duration name: Print Time
- type: custom:bubble-card card_type: horizontal-buttons-stack auto_order: true 1_icon: mdi:bird 1_link: '#frigate' 2_icon: mdi:remote-tv 2_link: '#remote' 2_entity: media_player.shield 3_icon: mdi:speaker-multiple 3_link: '#music' 3_entity: media_player.spotify_steph_tanner 4_link: '#fiona' 4_icon: mdi:cat 5_link: '#printer' 5_icon: mdi:printer-3d-nozzle rise_animation: false highlight_current_view: true `

Clooos / Bubble-Card

Horizontal Button Stack stacking all icons on top of each other #409