home-assistant / frontend

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

Sections view: Size issue with gauge in horizontal stack + tile cards #20905

Closed mbo18 closed 3 days ago

mbo18 commented 1 month ago

Checklist

Describe the issue you are experiencing

When adding a gauge card inside an horizontal stack with 2 tile cards in a vertical stack there is an issue with sizing but only when the section's size is wide :

Capture d’écran 2024-05-29 à 21 46 26

When on mobile or when the section size is small:

Capture d’écran 2024-05-29 à 21 47 36

Describe the behavior you expected

Size of card should not change

Steps to reproduce the issue

  1. Add a section
  2. Add an horizontal stack with a gauge card and a vertical stack with 2 tile cards
  3. Resize the browser window and tadaaa ...

What version of Home Assistant Core has the issue?

core-2024.5.5

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Safari and Firefox latest version

Which operating system are you using to run this browser?

macOS

State of relevant entities

No response

Problem-relevant frontend configuration

- title: Air quality
    path: air-quality
    icon: mdi:air-filter
    type: sections
    sections:
      - type: grid
        cards:
          - type: horizontal-stack
            cards:
              - type: gauge
                entity: sensor.awair_element_74608_score
                needle: true
                min: 0
                max: 100
                view_layout:
                  position: sidebar
                name: Score
                severity:
                  green: 80
                  yellow: 50
                  red: 0
              - type: vertical-stack
                cards:
                  - type: tile
                    entity: sensor.awair_element_74608_temperature
                    name: Température
                  - type: tile
                    entity: sensor.awair_element_74608_humidity
                    name: Humidité

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

mbo18 commented 3 days ago

Solved with layout in release 2024.7