Hi everyone,
I’m running Home Assistant OS and I’ve found a reproducible issue with my dashboard layout after upgrading Home Assistant Core from 2026.3.0 to 2026.8.x.
What happens
After updating to Core 2026.8.x, the Quick Actions section in my sidebar becomes compressed and all Bubble Cards overlap each other. The rest of the dashboard mostly remains in the correct position, but the sidebar layout is broken.
What I’m using
- Home Assistant OS 18.2
- Home Assistant Core 2026.8.x (problem)
- Home Assistant Core 2026.3.0 (works correctly)
- Android Home Assistant Companion App
custom:vertical-stack-in-cardcustom:layout-card(v2.4.7)custom:bubble-cardcustom:button-card
I’m attaching my screenshot of the broken layout.
The issue is limited to the Quick Actions section in the sidebar (the part that contains the Bubble Cards). On Core 2026.3.0 the exact same YAML renders correctly, while on Core 2026.8.x the Bubble Cards in that section overlap each other and the layout becomes compressed.
I’ve already tested:
- clearing the Android Companion App cache;
- restarting Home Assistant;
- checking for HACS updates (none available);
- modifying the
layout-cardgrid settings;Preformatted text - replacing parts of the layout with
vertical-stack.
None of these changes made any difference.
Since the exact same dashboard works correctly on 2026.3.0, I suspect a frontend rendering regression introduced somewhere between 2026.3 and 2026.8.
Has anyone seen something similar with vertical-stack-in-card, layout-card, or bubble-card in recent Home Assistant Core versions?
type: custom:vertical-stack-in-card
cards:
- type: markdown
content: '{{ ''%02d'' | format(now().hour) }}:{{ ''%02d'' | format(now().minute) }}'
card_mod:
style: |
ha-card {
font-size: 60px;
font-weight: 250;
height: 50px;
margin-top: -2%;
background: none;
box-shadow: none;
backdrop-filter: none !important
- type: markdown
content: |-
{% set dag = now().strftime('%A') %} {{ dag.replace('Monday', 'maandag')
.replace('Tuesday', 'dinsdag')
.replace('Wednesday', 'woensdag')
.replace('Thursday', 'donderdag')
.replace('Friday', 'vrijdag')
.replace('Saturday', 'zaterdag')
.replace('Sunday', 'zondag') }}, {{ now().day }}-{{ now().month }}-{{ now().year }}
card_mod:
style: |
ha-card {
font-size: 15px;
font-weight: 300;
margin-top: -12%;
background: none;
box-shadow: none;
backdrop-filter: none !important
- type: custom:layout-card
layout: |
grid-template-columns: 4% 92% 4%
grid-template-rows: 4% 92% 4%
grid-template-areas: |
". . ."
". cards ."
". . ."
cards:
- type: grid
columns: 2
square: false
cards:
- type: custom:button-card
template: bubble_card_graph
entity: sensor.temp_sensor
variables:
card_name: Temp.
card_icon: mdi:thermometer
graph_color: '#A2AADB'
- type: custom:button-card
template: bubble_card_graph
entity: sensor.temp_sensor_humidity
variables:
card_name: Humidity
card_icon: mdi:water
graph_color: '#AEC8A4'
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.lights_on_counter
name: Lights
icon: mdi:lightbulb
card_layout: normal
styles: |-
ha-card {
--bubble-main-background-color: rgba(255,255,255,0.1) !important;
}
- type: custom:bubble-card
card_type: button
button_type: state
entity: counter.beddengoed_verschonen_reminder
show_name: true
show_last_changed: false
show_attribute: false
attribute: icon
name: 'Nights '
icon: mdi:bed
styles: >-
ha-card {
--bubble-main-background-color: rgba(255,255,255,0.1) !important;
}
${card.querySelector('.bubble-name').innerText =
hass.states['counter.beddengoed_verschonen_reminder'].state + '
nights' }
${card.querySelector('.bubble-state').innerText = 'since last sheets
change' }
sub_button:
- entity: counter.beddengoed_verschonen_reminder
show_background: false
name: ''
show_name: true
icon: mdi:restore
tap_action:
action: call-service
target:
entity_id: entity
service: counter.reset
card_layout: normal
- type: custom:gap-card
height: 5
- type: custom:button-card
name: Quick Actions
styles:
card:
- background: none
- box-shadow: none
- backdrop-filter: none !important
name:
- justify-self: start
- margin-left: 8%
- font-size: 14pt
- font-weight: 600
- type: custom:layout-card
layout: |
grid-template-columns: 4% 92% 4%
grid-template-rows: 4% 92% 4%
grid-template-areas: |
". . ."
". cards ."
". . ."
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: automation.motion_sensor
name: Motion Sensor
icon: mdi:motion-sensor
styles: |-
.bubble-icon {
color: ${hass.states[entity].state === 'on' ? 'rgb(255,255,255)' : 'rgba(255,255,255,0.6)'} !important;
}
ha-card {
--bubble-main-background-color: rgba(255,255,255,0.1) !important;
}
sub_button:
- entity: automation.motion_sensor
icon: mdi:toggle-switch
show_background: false
tap_action:
action: call-service
target:
entity_id: entity
service: automation.turn_off
visibility:
- condition: state
entity: automation.motion_sensor
state: 'on'
- entity: automation.motion_sensor
icon: mdi:toggle-switch-off-outline
show_background: false
tap_action:
action: call-service
target:
entity_id: entity
service: automation.turn_on
visibility:
- condition: state
entity: automation.motion_sensor
state: 'off'
show_last_changed: false
show_state: true
card_layout: normal
button_action:
tap_action:
action: none
- type: custom:bubble-card
card_type: button
show_last_updated: false
show_last_changed: false
show_state: true
show_attribute: false
sub_button: []
button_type: state
entity: switch.sp01
tap_action:
action: toggle
name: SP01
icon: phu:smart-plug-sonoff
- type: custom:bubble-card
card_type: button
button_type: state
name: Wake Up Automation
icon: mdi:weather-sunset-up
entity: automation.weekend_wake_up
styles: |-
.bubble-icon {
color: ${hass.states[entity].state === 'on' ? 'rgb(255,255,255)' : 'rgba(255,255,255,0.6)'} !important;
}
ha-card {
--bubble-main-background-color: rgba(255,255,255,0.1) !important;
}
card_layout: normal
tap_action:
action: none
button_action:
tap_action:
action: navigate
navigation_path: '#wake-up'
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
backdrop-filter: none !important;
padding: 12px
}
view_layout:
grid-area: sidebar