Single card (Panel) with vertical and horisontal stack will broke card view

[almost-online]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.
• [X] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

Home assistant 2024.8.0 I have a panel with a single card view + horizontal and vertical stacs liike this one

title: Test card
path: test-card
icon: mdi:battery-clock-outline
cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        title: Title1
        cards:
          - type: tile
            entity: sensor.in_out_electricity_diff
            vertical: true
          - type: tile
            entity: sensor.in_out_electricity_diff
            vertical: true
          - type: tile
            entity: sensor.in_out_electricity_percent
            vertical: true
            show_entity_picture: false
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: tile
                entity: sensor.in_out_electricity_percent
              - type: tile
                entity: sensor.in_out_electricity_percent
          - type: horizontal-stack
            cards:
              - type: tile
                entity: sensor.in_out_electricity_percent
              - type: tile
                entity: sensor.in_out_electricity_percent
type: panel

on the editor this cards view as expected

But on the panel view I have some overlaping like this one

Also the same problem on the mobile app (Android)

P.S. Home assistant 2024.7.x had a similar prooblem but not criticall. Overlaping was by few pixels

Describe the behavior you expected

Expected the card should display like this one

Steps to reproduce the issue

Usee the YAML above (with correct entities) with default themes

What version of Home Assistant Core has the issue?

2024.8.0, 2024.7.х

What was the last working version of Home Assistant Core?

No idea

In which browser are you experiencing the issue with?

Chrome Version 127.0.6533.100 (Official Build) (arm64)

Which operating system are you using to run this browser?

mac OS sonoma 1.16, Android modile app

State of relevant entities

any entities

Problem-relevant frontend configuration

title: Test card
path: test-card
icon: mdi:battery-clock-outline
cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        title: Title1
        cards:
          - type: tile
            entity: <any entity>
            vertical: true
          - type: tile
            entity: <any entity>
            vertical: true
          - type: tile
            entity: <any entity>
            vertical: true
            show_entity_picture: false
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: tile
                entity: <any entity>
              - type: tile
                entity: <any entity>
          - type: horizontal-stack
            cards:
              - type: tile
                entity: <any entity>
              - type: tile
                entity: <any entity>
type: panel

Javascript errors shown in your browser console/inspector

no errors

Additional information

No response

[almost-online]

Ubuntu, FireFox browser the same

[ildar170975]

seems to be a duplicate of https://github.com/home-assistant/frontend/issues/18972

[almost-online]

seems to be a duplicate of #18972

For default View type (Masonry (default)) looks like expected

But not for Panel (1 card) view type

[ildar170975]

But not for Panel (1 card) view type

What is a difference? In my issue it was not said about a particular view. The glitch occurs on any view.

In my case - button card & stacks with a title. In your case - tile card & stack w.o a title.

[almost-online]

But not for Panel (1 card) view type

What is a difference? In my issue it was not said about a particular view. The glitch occurs on any view.

Than, at least for the Masonry (default) view type the issue has been fixed

This is just a small clarification

[ildar170975]

at least for the Masonry (default) view type the issue had fixed

The issue could be still there - we just do not see it in this particular case.

BTW, here is a simplified MWE for your issue:

type: vertical-stack
cards:
  - type: horizontal-stack
    title: Title1
    cards:
      - type: tile
        entity: sun.sun
      - type: tile
        entity: sun.sun
      - type: tile
        entity: sun.sun
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: tile
            entity: sun.sun
          - type: tile
            entity: sun.sun
      - type: horizontal-stack
        cards:
          - type: tile
            entity: sun.sun
          - type: tile
            entity: sun.sun

And it seems that "height: 100%" for a horizontal-stack's "div#root" causes this overlap.

[Wendelstein7]

Can confirm:

[Mastiffen]

I have the same problem. Volume, mute and equalizer controls overlap power control for the amps.