Horizontal stack with 2 horizontal stacks: a height glitch

[ildar170975]

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.

Describe the issue you are experiencing

Consider this card:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: horizontal-stack
        title: title
        cards:
          - show_name: true
            show_icon: true
            type: button
          - type: button
      - type: horizontal-stack
        title: title
        cards:
          - type: button
          - type: button
  - type: horizontal-stack
    title: stack title
    cards:
      - type: button
      - type: button
  - type: horizontal-stack
    title: stack title
    cards:
      - type: button
      - type: button

The upper horiz stack contains two horiz stacks. Seems that inner stacks make buttons of wrong height. As a result - the stack title text came under the upper stack:

A correct look:

Describe the behavior you expected

Using horiz stacks inside a horz stack does not cause glitches.

Steps to reproduce the issue

as above

What version of Home Assistant Core has the issue?

2023.12.0

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Chrome 119.0.6045.200

Which operating system are you using to run this browser?

Win10x64

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[vwtuner]

Ich habe ein ähnliches Problem

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[ildar170975]

Default icons are not shown in 2024.4.3, so the test code is:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: horizontal-stack
        title: title
        cards:
          - show_name: true
            show_icon: true
            type: button
            icon: mdi:car
          - type: button
            icon: mdi:car
      - type: horizontal-stack
        title: title
        cards:
          - type: button
            icon: mdi:car
          - type: button
            icon: mdi:car
  - type: horizontal-stack
    title: stack title
    cards:
      - type: button
        icon: mdi:car
      - type: button
        icon: mdi:car
  - type: horizontal-stack
    title: stack title
    cards:
      - type: button
        icon: mdi:car
      - type: button
        icon: mdi:car

Editor:

Edit mode:

Non-edit mode:

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[ildar170975]

Up