Dashboard with Sections - empty space when conditional cards are being used

[ChristophCaina]

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

I'm creating a new dashboard for my plants - due to the huge amount of plant sensors, I want to hide all plant-cards when there's no problem. When all measurements are within the expected range, the card should be hidden.

This is working - but the dashboard shows an empty area where the conditional cards are placed...

Describe the behavior you expected

like for the other dashboard types, the place where a conditional card is placed should not be "blocked" by an empty area

Steps to reproduce the issue

1. Create a section dashboard
2. Create a conditional card with conditions not met
3. Save the dashboard & leave the editor ...

What version of Home Assistant Core has the issue?

core 2024.4.1

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

No response

Which operating system are you using to run this browser?

No response

State of relevant entities

No response

Problem-relevant frontend configuration

title: pflanzen
path: pflanzen
icon: mdi:flower
cards: []
type: sections
sections:
  - type: grid
    cards:
      - type: vertical-stack
        cards:
          - type: conditional
            conditions:
              - condition: state
                entity: plant.benjamin
                state: problem
            card:
              type: vertical-stack
              cards:
                - type: custom:flower-card
                  entity: plant.benjamin
                  battery_sensor: sensor.benjamin_battery
                  show_bars:
                    - moisture
                    - conductivity
                    - temperature
                    - illuminance
                    - dli
                    - humidity
                  display_type: full
                - type: horizontal-stack
                  cards:
                    - type: tile
                      entity: sensor.benjamin_signal_strength
                      name: Signalstärke
                    - type: tile
                      entity: button.benjamin_batterie_ersetzt
                      name: Batterie ersetzt
                      hide_state: true
      - type: vertical-stack
        cards:
          - type: conditional
            conditions:
              - condition: state
                entity: plant.ficus_benjamina_bonsai
                state: problem
            card:
              type: vertical-stack
              cards:
                - type: custom:flower-card
                  entity: plant.ficus_benjamina_bonsai
                  battery_sensor: sensor.ficus_benjamina_1_battery
                  show_bars:
                    - moisture
                    - conductivity
                    - temperature
                    - illuminance
                    - dli
                    - humidity
                  display_type: full
                - type: horizontal-stack
                  cards:
                    - type: tile
                      entity: sensor.ficus_benjamina_1_signal_strength
                      name: Signalstärke
                    - type: tile
                      entity: button.ficus_benjamina_1_batterie_ersetzt
                      hide_state: true
                      name: Batterie ersetzt
      - type: vertical-stack
        cards:
          - type: conditional
            conditions:
              - condition: state
                entity: plant.ficus_microcarpa_bonsai
                state: problem
            card:
              type: vertical-stack
              cards:
                - type: custom:flower-card
                  entity: plant.ficus_microcarpa_bonsai
                  battery_sensor: sensor.ficus_microarpa_bonsai_battery
                  show_bars:
                    - moisture
                    - conductivity
                    - temperature
                    - illuminance
                    - dli
                    - humidity
                  display_type: full
                - type: horizontal-stack
                  cards:
                    - type: tile
                      entity: sensor.ficus_microarpa_bonsai_signal_strength
                      name: Signalstärke
                    - type: tile
                      entity: button.ficus_microarpa_bonsai_batterie_ersetzt
                      name: Batterie ersetzt
                      hide_state: true
      - type: vertical-stack
        cards:
          - type: custom:flower-card
            entity: plant.gummibaum
            battery_sensor: sensor.ficus_elastica_battery
            show_bars:
              - moisture
              - conductivity
              - temperature
              - illuminance
              - dli
              - humidity
            display_type: full
          - type: horizontal-stack
            cards:
              - type: tile
                entity: sensor.ficus_elastica_signal_strength
                name: Signalstärke
              - type: tile
                entity: button.ficus_elastica_battery_replaced
                name: Batterie ersetzt
                hide_state: true

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[Revilo91]

Same as here?

20352

[RemakingEden]

I want to second this issue. It's the last thing holding me back to converting my original dashboards to sections.

[mbo18]

Same here but only since beta 2024.6.0b0

[niemtec]

Also seeing this issue with sections

[elfrinjo]

In my tests, this only happens with Firefox. Chrome and Edge are ok.

The same (or similar) issue exists for the new stack-visibility feature with horiziontal space. In Firefox the space is not freed up:

[niemtec]

I've seen it happen in the iOS app and with Arc Browser (so that's Chromium)

[snigehere]

I am seeing this issue with sections and conditional cards on a back level of android tablet but its OK on a later level

My old Lenovo tablet running android 5.01 and webview 95.0.4638.74 and on this version I see gaps in the UI where conditional cards are hidden so the content of the card is hidden but the white space for it remains.

On my phone which is android v14 and webview 125.0.6422.165 there is no white space in place of conditional cards.

Core 2024.6.1 Supervisor 2024.06.0 Operating System 12.3 Frontend 20240605.0

I have a secondary issue with a couple of cards which have a hide a true / false value set in the card configuration - these leave a white gap in all of my devices but I will raise that with the integration owners in the first instance.

[AdaaamB]

I'm also experiencing this using sections + conditional cards on a Lenovo M10 running Fully Kiosk Browser 1.55.3-play.

Core 2024.6.3 Supervisor 2024.06.0 Operating System 12.4 Frontend 20240610.1

The gap for conditional cards isn't there on Windows 10 Chrome