home-assistant / frontend

:lollipop: Frontend for Home Assistant
https://demo.home-assistant.io
Other
3.98k stars 2.72k forks source link

Cards inside horizontal stack don't spread evenly #21206

Closed hmmbob closed 3 months ago

hmmbob commented 3 months ago

Checklist

Describe the issue you are experiencing

Since beta3, cards inside a horizontal stack do not spread evenly anymore. This is a bunch of mushroom light cards inside a horizontal stack for each line inside a vertical stack. These light cards used to fill out nicely into two equal columns, now they look like this non-OCD-compatible bunch of clutter.

image

As reported on discord

Describe the behavior you expected

Two equal columns of cards

Steps to reproduce the issue

.

What version of Home Assistant Core has the issue?

core-2024.7.0b3

What was the last working version of Home Assistant Core?

core-2024.7.0b2

In which browser are you experiencing the issue with?

Chrome

Which operating system are you using to run this browser?

Win11

State of relevant entities

No response

Problem-relevant frontend configuration

path: start
title: Start
icon: mdi:home-assistant
cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-light-card
            card_mod:
              style: |
                ha-card {
                  box-shadow: var(--card-box-shadow);
                  margin: 0px 0px 0px 14px;
                }
            entity: light.spots_vaas
            icon: mdi:lightbulb-spot
            fill_container: true
            show_brightness_control: true
            collapsible_controls: true
          - type: custom:mushroom-light-card
            card_mod:
              style: |
                ha-card {
                  box-shadow: var(--card-box-shadow);
                  margin: 0px 14px 0px 0px;
                }
            entity: light.spots_woonkamer
            icon: mdi:sofa
            fill_container: true
            show_brightness_control: true
            collapsible_controls: true

      - type: horizontal-stack
        cards:
          - type: custom:mushroom-light-card
            card_mod:
              style: |
                ha-card {
                  box-shadow: var(--card-box-shadow);
                  margin: 0px 0px 0px 14px;
                }
            entity: light.spots_eetkamer
            icon: mdi:table-chair
            show_brightness_control: true
            collapsible_controls: true
          - type: custom:mushroom-light-card
            card_mod:
              style: |
                ha-card {
                  box-shadow: var(--card-box-shadow);
                  margin: 0px 14px 0px 0px;
                }
            entity: light.eetkamer_tafel
            icon: mdi:globe-light-outline
            show_brightness_control: true
            collapsible_controls: true

      - type: horizontal-stack
        cards:
          - type: custom:mushroom-light-card
            entity: light.spots_keuken
            icon: mdi:countertop
            fill_container: false
            show_brightness_control: true
            collapsible_controls: true
            card_mod:
              style: |
                ha-card {
                  box-shadow: var(--card-box-shadow);
                  margin: 0px 0px 0px 14px;
                }
          - type: custom:mushroom-light-card
            card_mod:
              style: |
                ha-card {
                  box-shadow: var(--card-box-shadow);
                  margin: 0px 14px 0px 0px;
                }
            entity: light.badkamer
            show_brightness_control: true
            collapsible_controls: true

      - type: horizontal-stack
        cards:
          - type: custom:mushroom-light-card
            card_mod:
              style: |
                ha-card {
                  box-shadow: var(--card-box-shadow);
                  margin: 0px 0px 0px 14px;
                }
            entity: light.sonoff_l1
            name: "Ledstrip pubercave"
            icon: mdi:led-strip-variant
            show_brightness_control: true
            collapsible_controls: true
            show_color_control: true
            use_light_color: true
          - type: custom:mushroom-light-card
            card_mod:
              style: |
                ha-card {
                  box-shadow: var(--card-box-shadow);
                  margin: 0px 14px 0px 0px;
                }
            entity: light.battletron_ball_light_m
            name: "Ball light pubercave"
            icon: mdi:globe-light-outline
            show_brightness_control: true
            collapsible_controls: true
            show_color_control: true
            use_light_color: true

      - type: horizontal-stack
        cards:
          - type: custom:mushroom-light-card
            card_mod:
              style: |
                ha-card {
                  box-shadow: var(--card-box-shadow);
                  margin: 0px 0px 0px 14px;
                }
            entity: light.ledstrip_mini
            name: "Bureau minicave"
            icon: mdi:desk
            show_brightness_control: true
            collapsible_controls: true
            show_color_control: true
            use_light_color: true
          - type: custom:mushroom-light-card
            card_mod:
              style: |
                ha-card {
                  box-shadow: var(--card-box-shadow);
                  margin: 0px 14px 0px 0px;
                }
            entity: light.ledstrip_bed_mini
            name: "Bed minicave"
            icon: mdi:bed
            show_brightness_control: true
            collapsible_controls: true
            show_color_control: true
            use_light_color: true

      - type: custom:mushroom-light-card
        card_mod:
          style: |
            ha-card {
              box-shadow: var(--card-box-shadow);
              margin: 0px 14px 0px 14px;
            }
        entity: switch.tuinverlichting
        icon: mdi:coach-lamp
        show_brightness_control: true
        collapsible_controls: true
        show_color_control: true
        use_light_color: true

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

hmmbob commented 3 months ago

Quite probably PEBCAK.

image