Sections: Tablet in portrait mode shows single column of cards

[ronschaeffer]

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.
• [ ] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

Tablet model tried: Samsung Galaxy Tab S4 / 10.5" 1600 x 2560 Applies to both HA Companion Android app and Chrome on Android. See version details below.

Using the new Sections view on a tablet in portrait mode, the dashboard displays a single column of cards with wide empty borders, whereas the Masonry view displays two columns with essentially the same content, making much better use of the screen area.

I don't know if this should be a bug report or a feature request. If a feature request, the implementation could be to allow setting of a minimum number of columns similar to the maximum number of columns setting introduced in 2024.4 beta.

Describe the behavior you expected

Dashboard in portrait mode should display in two columns with Section view for this screen width as it does in Masonry view for this screen width.

Steps to reproduce the issue

1. Create Sections view in Dashboard.
2. Open HA Companion Android app or Chrome Android on tablet in portrait mode.

What version of Home Assistant Core has the issue?

2024.4.0b3

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Chrome Android 123.0.6312.80 / HA Companion Android app 2024.1.5-full

Which operating system are you using to run this browser?

Android 10

State of relevant entities

No response

Problem-relevant frontend configuration

views:
  - type: sections
    title: Home
    path: default-view
    icon: mdi:home-assistant
    sections:
      - type: grid
        cards:
          - custom_fields:
              day_date:
                card:
                  entity: sensor.day
                  label: |
                    [[[ return states['sensor.date_short'].state ]]]
                  show_icon: false
                  show_label: true
                  show_name: false
                  show_state: true
                  styles:
                    label:
                      - color: var(--secondary-text-color)
                      - justify-self: end
                    state:
                      - font-weight: bold
                      - font-size: 120%
                      - justify-self: end
                    card:
                      - background: rgb(0,0,0,0%)
                      - box-shadow: none
                      - border-radius: 0px
                      - border-color: rgb(0,0,0,0%)
                  type: custom:button-card
              time: |
                [[[ return states['sensor.time'].state ]]]
            entity: ''
            hold_action: none
            styles:
              card:
                - padding: 4%
                - font-size: 500%
                - styles:
                    - color: var(--button-card-text-color)
              custom_fields:
                day_date:
                  - justify-self: end
                  - font-size: 40%
                  - text_color: var(--secondary-text-color)
                time:
                  - justify-self: start
              grid:
                - grid-template-areas: '"time day_date"'
                - grid-template-columns: 2fr 3fr
                - grid-template-rows: 1fr
            tap_action: none
            type: custom:button-card
          - show_current: true
            show_forecast: false
            type: weather-forecast
            entity: weather.twickenham_pirate_weather_daily
            name: Twickenham
            forecast_type: daily
            tap_action:
              action: navigate
              navigation_path: '#weather'
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-template-card
                primary: Away Mode
                secondary: |-
                  {% set away_mode=states.input_boolean.vacation_mode.state %}
                  {% set ron=states.person.ron.state %}
                  {% if away_mode=='off' %}
                    Off
                  {% elif away_mode=='on' and ron=='home' %}
                    On | Home
                  {% elif away_mode=='on' and ron=='away' %}
                    On | Away
                  {% elif away_mode=='on' and ron=='not_home' %}
                    On | Away
                  {% elif away_mode=='on' %}
                    On | {{ states.person.ron.state[0]|upper }}{{ states.person.ron.state[1:] }} 
                  {% else %}
                    Unknown
                  {% endif %}
                icon: mdi:beach
                entity: input_boolean.vacation_mode
                layout: horizontal
                icon_color: |-
                  {% set state=states.input_boolean.vacation_mode.state %}
                  {% if state=='off' %}
                    grey
                  {% elif state=='on' %}
                    blue
                  {% endif %}
                badge_icon: |-
                  {% set state=states.input_boolean.vacation_mode.state %}
                  {% if state=='off' %}
                    none
                  {% elif state=='on' %}
                    mdi:check
                  {% endif %}
                badge_color: |-
                  {% set state=states.input_boolean.vacation_mode.state %}
                  {% if state=='off' %}
                    none
                  {% elif state=='on' %}
                    green
                  {% endif %}
                multiline_secondary: false
              - type: custom:mushroom-template-card
                primary: Water Heater
                secondary: >-
                  {{ states('switch.water_heater_power')[0]|upper }}{{
                  states('switch.water_heater_power')[1:]|lower }}
                icon: mdi:water-boiler
                entity: switch.water_heater_power
                layout: horizontal
                icon_color: |-
                  {% set state=states.switch.water_heater_power.state %}
                  {% if state=='off' %}
                    grey
                  {% elif state=='on' %}
                    green
                  {% endif %}
                badge_icon: ''
                badge_color: ''
                fill_container: true
                hold_action:
                  action: more-info
                tap_action:
                  action: toggle
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                icon: si:tado
                size: 75%
                tap_action:
                  action: url
                  url_path: app://com.tado
                styles:
                  card:
                    - height: 100%
                    - width: 60px
              - type: custom:mushroom-template-card
                primary: Heating
                secondary: |-
                  {% set state=states.group.heating.state  %}
                  {% if state=='off' %}
                    All Off
                  {% else %}
                    Auto
                  {% endif %}
                icon: mdi:home
                entity: group.heating
                layout: horizontal
                icon_color: |-
                  {% set state=states.group.heating.state  %}
                  {% if state=='Off' %}
                    gray
                  {% elif state=='on' %}
                    blue
                  {% elif state=='auto' %}
                    green
                  {% endif %}
                badge_icon: >-
                  {% set state=state_attr('climate.living_room', 'hvac_action') 
                  %}

                  {% if state=='Off' %}
                    none
                  {% elif state=='idle' %}
                    mdi:clock-outline
                  {% elif state=='heating' %}
                    mdi:fire
                  {% endif %}
                badge_color: >-
                  {% set state=state_attr('climate.living_room', 'hvac_action') 
                  %}

                  {% if state=='Off' %}
                    none
                  {% elif state=='idle' %}
                    disabled
                  {% elif state=='heating' %}
                    deep-orange
                  {% endif %}
                fill_container: true
                tap_action:
                  action: navigate
                  navigation_path: '#heating'
                hold_action:
                  action: more-info
              - type: conditional
                conditions:
                  - condition: user
                    users:
                      - 11b58d799cf543ebac68a50223e3c620
                      - d7314adfd60b48fbb0cfc261f7d14870
                      - 47184b7353474660be1dcbcbb2d2943f
                      - 9dfa188438124d1f9e9c6dd0ef44a611
                card:
                  type: custom:mushroom-template-card
                  primary: Living Room
                  secondary: >-
                    {{ state_attr('climate.living_room', 'current_temperature')
                    }}º C
                  icon: mdi:bed
                  entity: climate.living_room
                  layout: horizontal
                  icon_color: |-
                    {% set state=states.climate.living_room.state  %}
                    {% if state=='Off' %}
                      gray
                    {% elif state=='heat' %}
                      deep-orange
                    {% elif state=='auto' %}
                      green
                    {% endif %}
                  badge_icon: >-
                    {% set state=state_attr('climate.living_room',
                    'hvac_action')  %}

                    {% if state=='Off' %}
                      none
                    {% elif state=='idle' %}
                      mdi:clock-outline
                    {% elif state=='heating' %}
                      mdi:fire
                    {% endif %}
                  badge_color: >-
                    {% set state=state_attr('climate.living_room',
                    'hvac_action')  %}

                    {% if state=='Off' %}
                      none
                    {% elif state=='idle' %}
                      disabled
                    {% elif state=='heating' %}
                      deep-orange
                    {% endif %}
                  fill_container: true
                  multiline_secondary: false
              - type: conditional
                conditions:
                  - condition: user
                    users:
                      - a3728a103fdb4eb3bfe48c88a6abf391
                card:
                  type: custom:mushroom-template-card
                  primary: Master Bed
                  secondary: >-
                    {{ state_attr('climate.master_bedroom',
                    'current_temperature') }}º C
                  icon: mdi:bed
                  entity: climate.master_bedroom
                  layout: horizontal
                  icon_color: |-
                    {% set state=states.climate.master_bedroom.state  %}
                    {% if state=='Off' %}
                      gray
                    {% elif state=='heat' %}
                      deep-orange
                    {% elif state=='auto' %}
                      green
                    {% endif %}
                  badge_icon: >-
                    {% set state=state_attr('climate.master_bedroom',
                    'hvac_action')  %}

                    {% if state=='Off' %}
                      none
                    {% elif state=='idle' %}
                      mdi:clock-outline
                    {% elif state=='heating' %}
                      mdi:fire
                    {% endif %}
                  badge_color: >-
                    {% set state=state_attr('climate.master_bedroom',
                    'hvac_action')  %}

                    {% if state=='Off' %}
                      none
                    {% elif state=='idle' %}
                      disabled
                    {% elif state=='heating' %}
                      deep-orange
                    {% endif %}
                  fill_container: true
                  multiline_secondary: false
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-template-card
                primary: '{{ states(''sensor.next_waste_collection'') }}'
                secondary: '{{ state_attr(''sensor.next_waste_collection'', ''scheduled'') }}'
                icon: '{{ state_attr(''sensor.next_waste_collection'', ''icon'') }}'
                entity: sensor.next_waste_collection
                icon_color: '{{ state_attr(''sensor.next_waste_collection'', ''icon_color'') }}'
                hold_action:
                  action: none
                double_tap_action:
                  action: none
                badge_icon: ''
                badge_color: ''
                tap_action:
                  action: navigate
                  navigation_path: '#waste-collection'
              - type: custom:mushroom-template-card
                primary: >
                  {% if state_attr('calendar.twickenham_event', 'message') ==
                  None %}
                    Twick Stadium
                  {% else %}
                    {{ state_attr('calendar.twickenham_event', 'message') }}
                  {% endif %}
                secondary: >-
                  {% if state_attr('calendar.twickenham_event', 'message') ==
                  None %}
                    Check
                  {% else %}
                    {{ as_timestamp(state_attr('calendar.twickenham_event','start_time')) | timestamp_custom('%d %-b | %H:%M') }}
                  {% endif %}
                icon: mdi:stadium
                entity: calendar.twickenham_event
                icon_color: >-
                  {% if state_attr('calendar.twickenham_event', 'message') ==
                  None %}
                    red
                  {% else %}
                    blue
                  {% endif %}
                multiline_secondary: true
                fill_container: true
                tap_action:
                  action: navigate
                  navigation_path: '#twickenham-event'
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-vacuum-card
                icon_animation: true
                commands:
                  - start_pause
                  - return_home
                layout: horizontal
                icon: mdi:robot-vacuum
                entity: vacuum.dexter
                fill_container: true
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/dexter
                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      .shape {
                        background: 
                        {% if states(config.entity) == 'docked' %}
                          rgba(76, 175, 80, 0.2) !important; /* Light green */
                        {% elif states(config.entity) == 'cleaning' %}
                          rgba(33, 150, 243, 0.2) !important; /* Light blue */
                        {% elif states(config.entity) == 'unavailable' %}
                          rgba(244, 67, 54, 0.2) !important; /* Light red */
                        {% endif %}
                    .: |
                      ha-state-icon {
                        color: 
                        {% if states(config.entity) == 'docked' %}
                          rgb(76, 175, 80); /* Green */
                        {% elif states(config.entity) == 'cleaning' %}
                          rgb(33, 150, 243); /* Blue */
                        {% elif states(config.entity) == 'unavailable' %}
                          rgb(244, 67, 54); /* Red */
                        {% endif %}
                        !important;
                      }
              - type: custom:button-card
                icon: phu:irobot
                size: 40%
                tap_action:
                  action: url
                  url_path: app://com.irobot.home
                styles:
                  card:
                    - height: 100%
                    - width: 60px
          - square: true
            columns: 4
            type: grid
            cards:
              - type: custom:mushroom-light-card
                entity: light.lights_ground_floor
                name: Ground
                icon: mdi:home-floor-g
                tap_action:
                  action: navigate
                  navigation_path: '#ground-floor-lights'
                secondary_info: none
                layout: vertical
                use_light_color: true
                icon_color: yellow
              - type: custom:mushroom-light-card
                entity: light.lights_first_floor
                name: First
                icon: mdi:home-floor-1
                tap_action:
                  action: navigate
                  navigation_path: '#first-floor-lights'
                secondary_info: none
                layout: vertical
                icon_color: yellow
              - type: custom:mushroom-light-card
                entity: light.lights_second_floor
                name: Second
                icon: mdi:home-floor-2
                tap_action:
                  action: navigate
                  navigation_path: '#second-floor-lights'
                secondary_info: none
                layout: vertical
                icon_color: yellow
              - type: custom:mushroom-light-card
                layout: vertical
                name: Outdoor
                icon: mdi:tree
                tap_action:
                  action: navigate
                  navigation_path: '#outdoor-lights'
                secondary_info: none
                entity: light.lights_outdoor
                use_light_color: false
                icon_color: yellow
      - type: grid
        cards:
          - type: custom:stack-in-card
            cards:
              - type: custom:mini-media-player
                entity: media_player.sonos_all_inside
                artwork: full-cover
                background: /local/images/cover_art_speaker.png
                hide:
                  controls: true
                  icon: true
                  info: true
                  mute: true
                  name: true
                  power: true
                  progress: true
                  source: true
                  volume: true
                  runtime: false
                tap_action:
                  action: url
                  url: app://com.sonos.acr2
                card_mod:
                  style: |
                    ha-card {
                      aspect-ratio: 1 / 1;
                      border-width: 0;
                      margin: 12px;
                      transform: translate3d(0,0,0);
                      -webkit-transform: translate3d(0,0,0);
                      content: "";

                      background-size: contain;
                      filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
                      border-radius: var(--control-border-radius);

                      --mmp-overlay-color: rgba(0,0,0,0);
                    }
              - type: conditional
                conditions:
                  - entity: media_player.sonos_all_inside
                    state_not: 'off'
                  - entity: media_player.sonos_all_inside
                    state_not: idle
                card:
                  type: custom:mini-media-player
                  entity: media_player.sonos_all_inside
                  hide:
                    icon: true
                    name: true
                    runtime: true
                    source: true
                    power: true
                    state_label: true
                    volume: true
                    info: true
                    progress: false
                    controls: true
                  more_info: false
                  toggle_power: false
                  group: true
                  card_mod:
                    style:
                      mmp-progress$: |
                        paper-progress {
                          {{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
                        }
                      .: |
                        ha-card {
                          margin: 0px 12px 6px;
                          --mmp-progress-height: 12px !important;
                          height: var(--mmp-progress-height);
                          --mmp-accent-color: rgb(var(--rgb-indigo-color), 0.3);
                          --mmp-border-radius: 12px !important;
                          --ha-card-border-width: 0;
                        }
              - type: custom:mushroom-media-player-card
                entity: media_player.sonos_all_inside
                use_media_info: true
                icon_type: icon
                collapsible_controls: true
                show_volume_level: false
                volume_controls: []
                media_controls:
                  - next
                  - play_pause_stop
                  - previous
                  - shuffle
                  - repeat
                icon: mdi:play
                tap_action:
                  action: none
                hold_action:
                  action: none
                double_tap_action:
                  action: none
                card_mod:
                  style:
                    mushroom-state-info$: |
                      .secondary:after {
                        content: " | {% if 'media_player.garden_patio' in state_attr(state_attr('media_player.sonos_all', "active_child"), 'group_members')|list or 'media_player.garden_terrace' in state_attr(state_attr('media_player.sonos_all', "active_child"), 'group_members')|list %}{{ state_attr(state_attr('media_player.sonos_all', "active_child"), "friendly_name") }} + {{((state_attr((state_attr('media_player.sonos_all', 'active_child')), 'group_members'))|list|count)-1 }} | Garden{% else %}{{ state_attr(state_attr('media_player.sonos_all', "active_child"), "friendly_name") }} + {{((state_attr((state_attr('media_player.sonos_all', 'active_child')), 'group_members'))|list|count)-1 }}{% endif %}"
                      }
                    .: |
                      mushroom-shape-icon {
                        display: flex;
                        {% set media_type = state_attr(config.entity, 'media_content_type') %}
                        {% set source = state_attr(config.entity, 'source') %}
                        {% if source == 'TV' or media_type == 'tvshow' %}
                          --card-mod-icon: mdi:television-classic;
                          animation: flicker 1s linear infinite alternate;
                        {% elif media_type == 'movie' %}
                          --card-mod-icon: mdi:movie-roll;
                          animation: spin 2s linear infinite reverse;
                        {% elif media_type == 'music' %}
                          --card-mod-icon: mdi:music;
                          animation: beat 1.3s ease-out infinite both;
                        {% elif media_type == 'playlist' %}
                          --card-mod-icon: mdi:music;
                          animation: beat 1.3s ease-out infinite both;
                        {% else %}
                          --card-mod-icon: mdi:play;
                        {% endif %}

                        {{ 'animation: none;' if not is_state(config.entity, 'playing') }}

                      }
                      @keyframes flicker {
                        0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
                        32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
                      }
                      @keyframes beat {
                        0%, 60% { --icon-symbol-size: 21px; }
                        5%, 17%, 57% { --icon-symbol-size: 22px; }
                        10%, 20%, 51% { --icon-symbol-size: 23px; }
                        25%, 45% { --icon-symbol-size: 24px; }
                        30%, 39% { --icon-symbol-size: 25px; }
                        33% { --icon-symbol-size: 26px; }
                      }
                      ha-card {
                        --ha-card-border-width: 0;
                        box-shadow: none;
                      }

                      }
              - type: custom:mushroom-media-player-card
                entity: media_player.sonos_all_inside
                volume_controls:
                  - volume_mute
                  - volume_set
                  - volume_buttons
                media_controls: []
                show_volume_level: true
                use_media_info: false
                icon_type: none
                primary_info: none
                secondary_info: none
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-width: 0;
                      box-shadow: none;
                    }
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-chips-card
                    alignment: justify
                    chips:
                      - type: template
                        icon: mdi:speaker-multiple
                        double_tap_action:
                          action: none
                        tap_action:
                          action: navigate
                          navigation_path: '#sonos-groups'
                        hold_action:
                          action: none
                        card_mod:
                          style: |
                            ha-card {
                              margin-top: 13px;
                              margin-right: 2px;
                              margin-left: 10px;
                              margin-bottom: 12px;
                              --chip-background: rgba(var(--rgb-disabled), 0.1);
                              --chip-box-shadow: none;
                              --chip-border-radius: 12px;
                              --chip-border-color: rgba(0, 0, 0, 0);
                              --chip-height: 40px;
                              --chip-padding: 10px;
                              mush-chip-icon-size: 40px;
                            }
                          box-shadow: none
                      - type: template
                        entity: input_button.sonos_everywhere
                        icon: mdi:home-circle-outline
                        tap_action:
                          action: toggle
                        double_tap_action:
                          action: none
                        hold_action:
                          action: none
                        card_mod:
                          style: |
                            ha-card {
                              margin-top: 13px;
                              margin-right: 2px;
                              margin-left: 0px;
                              --chip-background: rgba(var(--rgb-disabled), 0.1);
                              --chip-box-shadow: none;
                              --chip-border-radius: 12px;
                              --chip-border-color: rgba(0, 0, 0, 0);
                              --chip-height: 40px;
                              --chip-padding: 10px;
                              mush-chip-icon-size: 40px;
                            }
                          box-shadow: none
                      - type: template
                        entity: input_button.sonos_downstairs
                        icon: mdi:home-floor-g
                        content: ''
                        double_tap_action:
                          action: none
                        tap_action:
                          action: toggle
                        hold_action:
                          action: none
                        card_mod:
                          style: |
                            ha-card {
                              margin-top: 13px;
                              margin-right: 2px;
                              margin-left: 0px;
                              --chip-background: rgba(var(--rgb-disabled), 0.1);
                              --chip-box-shadow: none;
                              --chip-border-radius: 12px;
                              --chip-border-color: rgba(0, 0, 0, 0);
                              --chip-height: 40px;
                              --chip-padding: 10px;
                              mush-chip-icon-size: 40px;
                            }
                          box-shadow: none
                      - type: template
                        entity: input_button.sonos_top_floor
                        icon: mdi:home-floor-2
                        content: ''
                        double_tap_action:
                          action: none
                        tap_action:
                          action: toggle
                        hold_action:
                          action: none
                        card_mod:
                          style: |
                            ha-card {
                              margin-top: 13px;
                              margin-right: 2px;
                              margin-left: 0px;
                              --chip-background: rgba(var(--rgb-disabled), 0.1);
                              --chip-box-shadow: none;
                              --chip-border-radius: 12px;
                              --chip-border-color: rgba(0, 0, 0, 0);
                              --chip-height: 40px;
                              --chip-padding: 10px;
                              mush-chip-icon-size: 40px;
                            }
                          box-shadow: none
                      - type: template
                        entity: input_button.sonos_garden
                        icon: hue:room-outdoors
                        content: []
                        double_tap_action:
                          action: none
                        tap_action:
                          action: toggle
                        hold_action:
                          action: none
                        card_mod:
                          style: |
                            ha-card {
                              margin-top: 13px;
                              margin-right: 2px;
                              margin-left: 0px;
                              --chip-background: rgba(var(--rgb-disabled), 0.1);
                              --chip-box-shadow: none;
                              --chip-border-radius: 12px;
                              --chip-border-color: rgba(0, 0, 0, 0);
                              --chip-height: 40px;
                              --chip-padding: 10px;
                              mush-chip-icon-size: 40px;
                            }
                          box-shadow: none
                      - type: template
                        entity: input_button.sonos_volume_sync
                        icon: mdi:volume-equal
                        double_tap_action:
                          action: none
                        tap_action:
                          action: toggle
                        hold_action:
                          action: none
                        card_mod:
                          style: |
                            ha-card {
                              margin-top: 13px;
                              margin-right: 10px;
                              margin-left: 0px;
                              margin-bottom: 12px;
                              --chip-background: rgba(var(--rgb-disabled), 0.1);
                              --chip-box-shadow: none;
                              --chip-border-radius: 12px;
                              --chip-border-color: rgba(0, 0, 0, 0);
                              --chip-height: 40px;
                              --chip-padding: 10px;
                              mush-chip-icon-size: 40px;
                            }
                          box-shadow: none
      - type: grid
        cards:
          - type: custom:frigate-card
            view:
              default: live
              dark_mode: 'off'
              timeout_seconds: 60
              update_force: true
            menu:
              buttons:
                frigate:
                  enabled: false
                live:
                  enabled: true
                  priority: 79
                clips:
                  enabled: true
                snapshots:
                  enabled: false
                media_player:
                  priority: 14
                cameras:
                  priority: 100
                timeline:
                  enabled: false
                camera_ui:
                  enabled: false
              style: overlay
              position: right
            cameras:
              - camera_entity: camera.london_doorbell
                title: Doorbell
                live_provider: go2rtc
                icon: mdi:doorbell
                go2rtc:
                  modes:
                    - webrtc
              - camera_entity: camera.london_front_door
                live_provider: go2rtc
                icon: mdi:door
                title: Front Porch
              - camera_entity: camera.london_136b
                live_provider: go2rtc
                icon: mdi:home-floor-b
                title: 136b
            image:
              url: /local/images/test_pattern.png
              mode: camera
              layout:
                fit: cover
                position:
                  x: 0
            live:
              transition_effect: none
              show_image_during_load: true
              layout:
                position:
                  'y': 0
                  x: 49
                fit: contain
              zoomable: true
              auto_unmute: never
              auto_play: selected
            dimensions:
              aspect_ratio_mode: static
          - type: custom:mushroom-template-card
            primary: Front Door
            icon: |-
              {% if is_state('binary_sensor.front_door_sensor_iaszone', 'on') %}
                  mdi:door-open
                {% elif is_state('binary_sensor.front_door_sensor_iaszone', 'unavailable') %}
                  mdi:door
                {% else %}
                  mdi:door-closed
                {% endif %}
            badge_icon: ''
            icon_color: |-
              {% if is_state('binary_sensor.front_door_sensor_iaszone', 'on') %}
                  red
                {% elif is_state('binary_sensor.front_door_sensor_iaszone', 'unavailable') %}
                  orange
                {% else %}
                  green
                {% endif %}
            badge_color: ''
            entity: binary_sensor.front_door_sensor_iaszone
            tap_action:
              action: more-info
          - type: custom:mushroom-template-card
            primary: Courtyard Door
            icon: >-
              {% if is_state('binary_sensor.multisensor_courtyard_contact_a',
              'on') %}
                  mdi:door-open
                {% else %}
                  mdi:door-closed
                {% endif %}
            badge_icon: ''
            icon_color: |-
              {% if is_state('binary_sensor.front_door_sensor_iaszone', 'on') %}
                  red
                {% else %}
                  green
                {% endif %}
            badge_color: ''
            entity: binary_sensor.multisensor_courtyard_contact_a
            tap_action:
              action: more-info
          - type: custom:mushroom-template-card
            primary: Patio Door
            icon: |-
              {% if is_state('binary_sensor.patio_door_sensor_iaszone', 'on') %}
                  mdi:door-open
                {% else %}
                  mdi:door-closed
                {% endif %}
            badge_icon: ''
            icon_color: |-
              {% if is_state('binary_sensor.patio_door_sensor_iaszone', 'on') %}
                  red
                {% else %}
                  green
                {% endif %}
            badge_color: ''
            entity: binary_sensor.patio_door_sensor_iaszone
            tap_action:
              action: more-info
      - type: grid
        cards:
          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#ground-floor-lights'
                name: Ground Floor
                icon: mdi:home-floor-g
                close_on_click: false
                auto_close: 60000
                state: sensor.living_room_temperature
                bg_opacity: 88
                shadow_opacity: 60000
              - type: custom:mushroom-light-card
                entity: light.entry
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                icon: mdi:light-recessed
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.dining_room_main
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Dining Room - Main
                icon: mdi:light-recessed
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.dining_room_pendants
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Dining Room - Pendants
                icon: mdi:globe-light-outline
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.living_room_main
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Living Room - Main
                icon: mdi:light-recessed
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.kitchen_main
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Kitchen - Main
                icon: mdi:light-recessed
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.living_room_lamp
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Living Room Floor - Lamp
                icon: mdi:floor-lamp
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.kitchen_side
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Kitchen - Side
                icon: mdi:light-recessed
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.kitchen_pendant
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Kitchen - Pendant
                icon: mdi:globe-light
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.kitchen_led_strips
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                icon: mdi:led-strip-variant
                name: Kitchen - LED Strips
                layout: horizontal
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.under_stair_cupboard
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                icon: mdi:lightbulb
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#first-floor-lights'
                name: First Floor
                icon: mdi:home-floor-1
                close_on_click: false
                auto_close: 60000
                state: sensor.guest_room_temperature
                shadow_opacity: 60000
              - type: custom:mushroom-light-card
                entity: light.bottom_stairs
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                icon: mdi:light-recessed
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.library_main
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Library
                icon: mdi:light-recessed
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.guest_room_main
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Guest Room
                icon: mdi:light-recessed
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.guest_bathroom
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                icon: mdi:light-recessed
                icon_color: yellow
                name: Guest Bathroom
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#second-floor-lights'
                name: Second Floor
                icon: mdi:home-floor-2
                close_on_click: false
                auto_close: 60000
                state: sensor.master_bedroom_temperature
                shadow_opacity: 60000
              - type: custom:mushroom-light-card
                entity: light.top_stairs
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                icon: mdi:light-recessed
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.study_main
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Study - Main
                icon: mdi:light-recessed
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.study_desk_lamp
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Study - Desk Lamp
                icon: mdi:desk-lamp
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.master_bedroom_main
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Master Bedroom - Main
                icon: mdi:light-recessed
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.left_bedside_lamp
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Master Bedroom - Left Bedside Lamp
                icon: mdi:desk-lamp
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.right_bedside_lamp
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Master Bedroom - Right Bedside Lamp
                icon: mdi:desk-lamp
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.master_bathroom
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                icon: mdi:light-recessed
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#outdoor-lights'
                name: Outdoor
                icon: mdi:flower
                close_on_click: false
                auto_close: 60000
                state: sensor.courtyard_temperature_sensor_temperature
                shadow_opacity: 60000
              - type: custom:mushroom-light-card
                entity: light.porch
                fill_container: true
                use_light_color: true
                show_brightness_control: false
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                icon: mdi:dome-light
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.courtyard
                fill_container: true
                use_light_color: true
                show_brightness_control: false
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Courtyard
                icon: mdi:wall-sconce-flat-outline
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.patio
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                name: Patio
                icon: mdi:wall-sconce-flat-outline
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
              - type: custom:mushroom-light-card
                entity: light.garden_main
                fill_container: true
                use_light_color: true
                show_brightness_control: true
                show_color_control: true
                show_color_temp_control: true
                collapsible_controls: true
                icon: hue:floor-spot
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px
                    }
          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#heating'
                name: Heating
                icon: mdi:radiator
                close_on_click: false
                auto_close: 60000
                shadow_opacity: 60000
              - type: custom:mushroom-climate-card
                entity: climate.living_room
                icon: mdi:sofa-single
                show_temperature_control: true
                fill_container: true
                layout: horizontal
                hvac_modes:
                  - 'off'
                  - auto
                collapsible_controls: false
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px;
                    }
              - type: custom:mushroom-climate-card
                entity: climate.kitchen
                icon: mdi:fridge
                show_temperature_control: true
                fill_container: true
                layout: horizontal
                hvac_modes:
                  - 'off'
                  - auto
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px;
                    }
              - type: custom:mushroom-climate-card
                entity: climate.guest_room
                icon: mdi:bed
                show_temperature_control: true
                fill_container: true
                layout: horizontal
                hvac_modes:
                  - 'off'
                  - auto
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px;
                    }
              - type: custom:mushroom-climate-card
                entity: climate.library
                icon: mdi:bookshelf
                show_temperature_control: true
                fill_container: true
                layout: horizontal
                hvac_modes:
                  - 'off'
                  - auto
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px;
                    }
              - type: custom:mushroom-climate-card
                entity: climate.study
                icon: mdi:desktop-classic
                show_temperature_control: true
                fill_container: true
                layout: horizontal
                hvac_modes:
                  - 'off'
                  - auto
                collapsible_controls: false
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px;
                    }
              - type: custom:mushroom-climate-card
                entity: climate.master_bedroom
                icon: mdi:bed
                show_temperature_control: true
                fill_container: true
                layout: horizontal
                hvac_modes:
                  - 'off'
                  - auto
                card_mod:
                  style: |
                    ha-card {
                      border: none;
                      box-shadow: none;
                      margin: 0px 8px 8px;
                    }
          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#weather'
                shadow_opacity: 60000
              - show_current: true
                show_forecast: true
                type: weather-forecast
                entity: weather.twickenham_pirate_weather_daily
                forecast_type: daily
                name: Twickenham
          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#waste-collection'
                name: Hounslow Recycling
                shadow_opacity: 60000
              - initial_view: listWeek
                type: calendar
                entities:
                  - calendar.london_borough_of_hounslow
          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#twickenham-event'
                name: Twickenham Events
                shadow_opacity: 60000
              - initial_view: dayGridMonth
                type: calendar
                entities:
                  - calendar.twickenham_event
          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: pop-up
                hash: '#sonos-groups'
                name: Sonos Groups
                auto_close: 60000
              - type: custom:sonos-card
                sections:
                  - grouping
                predefinedGroups:
                  - name: Whole House
                    media: ''
                    entities:
                      - player: media_player.dining_room
                        volume: 15
                      - player: media_player.living_room
                        volume: 15
                      - player: media_player.kitchen
                        volume: 15
                      - player: media_player.guest_room
                        volume: 15
                      - player: media_player.library
                        volume: 30
                      - player: media_player.master_bedroom
                        volume: 15
                      - player: media_player.study
                        volume: 15
                  - name: Top Floor
                    media: ''
                    entities:
                      - player: media_player.master_bedroom
                        volume: 15
                      - player: media_player.study
                        volume: 15
                topFavorites:
                  - ''

Javascript errors shown in your browser console/inspector

No response

Additional information

Sections view (from YAML above) showing single column in HA Companion Android app:

Sections view (from YAML above) showing single column in Android Chrome:

Masonry view with essentially the same content showing two columns in HA Companion Android app:

[ronschaeffer]

In case it's useful...

• Forcing desktop view in the webview of Fully Kiosk version 1.55.1-play displays two columns compared to one column only without desktop view enabled. ("Mozilla/5.0 (Linux; Android 10; SM-T830 Build/QP1A.190711.020; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/123.0.6312.40 Safari/537.36")

• In contrast, both the default and desktop views in Chrome Android display one column.

[piitaya]

Columns of the sections view doesn't have the same width of the masonry layout as it's a new view. With 2024.4 release, we introduced some theme variables for sections, you should be able to tweak the column sizes to fit your device size : https://github.com/home-assistant/frontend/pull/20099

Here's the theme variables with default values:

ha-view-sections-row-gap: 8px
ha-view-sections-column-gap: 32px
ha-view-sections-column-min-width: 320px
ha-view-sections-column-max-width: 500px

[ronschaeffer]

Great. That looks like it will work. I'll try it out and report back.

[ronschaeffer]

Adjusting the column-gap and column-max-width worked. Thanks very much. It would still be useful to be able to set the minimum number of columns through the UI instead. Should I leave this issue as a feature request or raise a new one? (Or post it Feature Requests on the HA Forum instead?)

Here are the working theme and the resulting dashboard.

groundfloortab_Mushroom Rounded Shadow:
    # Home Assistant override
    ha-card-border-width: 0
    ha-card-border-radius: 36px
    primary-color: rgb(2, 119, 189)
    accent-color:  rgb(3,218,198)
    #ha-view-sections-row-gap: 8px #default
    ha-view-sections-column-gap: 8px #for portrait mode
    #ha-view-sections-column-min-width: 320px #default
    ha-view-sections-column-max-width: 346px #for portrait mode
    modes:
        light:
            ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
        dark:
            primary-background-color: rgb(18, 15, 18)
            app-header-background-color: rgb(24, 20, 24)
            ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5)
            mushroom-button-background-color: rgb(24, 210, 24)

[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.