-
Notifications
You must be signed in to change notification settings - Fork 3.6k
Description
Checklist
- I have updated to the latest available Home Assistant version.
- I have cleared the cache of my browser.
- I have tried a different browser to see if it is related to my browser.
- I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.
Describe the issue you are experiencing
Starting in the HA 2026.4 beta, vertical-stack cards, when placed within another card, such as a grid, now have a variable amount of empty space added after them, seemingly proportional to the width of the display. This space wasn't present in 2026.3 and earlier.
Describe the behavior you expected
I expect multiple vertical-stack cards to form a seamless vertical strip when placed in a single column in a grid card (or similar, like the custom layout card).
Steps to reproduce the issue
- Create a very simple view like this:
views:
- badges: []
title: Home
icon: mdi:home
type: panel
cards:
- type: grid
columns: 1
cards:
- type: vertical-stack
cards:
- type: entities
entities:
- alarm_control_panel.area_001
- type: vertical-stack
cards:
- type: entities
entities:
- alarm_control_panel.area_001
- type: vertical-stack
cards:
- type: entities
entities:
- alarm_control_panel.area_001
- Observe that each of the single-line
entitiescards has a significant amount of blank vertical space added to it before the next card is displayed. - Observe that if you vary the width of the browser window, the amount of vertical space changes proportionally. Even with the narrowest window possible, there's still quite a bit of empty space.
What version of Home Assistant Core has the issue?
core-2026.4.0b4
What was the last working version of Home Assistant Core?
core-2026.3.xx
In which browser are you experiencing the issue?
Google Chrome 146.0.7680.165 and Safari from iOS 26.5
Which operating system are you using to run this browser?
macOS Tahoe 26.4 and iOS 26.5
State of relevant entities
Problem-relevant frontend configuration
JavaScript errors shown in your browser console/inspector
There are no console warnings or errors generated when displaying the page or changing the width of the browser window.Additional information
I first noticed this when using three vertical columns in a custom layout card, but can reproduce using a standard grid card. I filed this issue against the custom card with more info and videos and such.
Oddly, if I put the sequence of vertical-stack cards within another vertical-stack card,, no additional vertical blank space is added.
views:
- badges: []
title: Home
icon: mdi:home
mode: panel
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: entities
entities:
- alarm_control_panel.area_001
- type: vertical-stack
cards:
- type: entities
entities:
- alarm_control_panel.area_001
- type: vertical-stack
cards:
- type: entities
entities:
- alarm_control_panel.area_001
Seems like something about the grid or custom:layout-card is causing this behavior.