Skip to content

Vertical stack adds blank space at the end proportional to the size of the card when placed within a grid card #30404

@rccoleman

Description

@rccoleman

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

  1. 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
  1. Observe that each of the single-line entities cards has a significant amount of blank vertical space added to it before the next card is displayed.
  2. 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.
Image

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
Image

Seems like something about the grid or custom:layout-card is causing this behavior.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions