Dashboard layout help - 1080p monitor splitting up row despite having plenty of space

Configuration Frontend
1

Hello, I have just finished this layout and looks good for me on my workstation, but when I display it on a 1080p monitor it pushes the media players below. I am displaying it on Chromium on a RaspberryPi with kiosk mode active in HASS.

I have tried shrinking the media players with card-mod, and they become small on the 1080p monitor, but they are still pushed below…

Any other advice on my config would be welcome too. Thanks!

What it looks like:

screenshot1
screenshot11920×1080 155 KB

What it should look like:
screenshot2
screenshot22617×862 136 KB 

title: Home
kiosk_mode:
  user_settings:
    - users:
        - mirror
      hide_sidebar: true
      kiosk: true
      ignore_entity_settings: true
views:
  - title: mirror
    path: mirror
    icon: mdi:mirror-variant
    theme: blackened
    type: custom:grid-layout
    badges: []
    cards:
      - type: custom:layout-card
        cards:
          - type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: entity
                    entity: sensor.time
                    name: Time
                  - type: entity
                    entity: sensor.greeting
                    state_color: true
                    icon: mdi:timelapse
                  - type: entity
                    entity: sensor.season
              - type: horizontal-stack
                cards:
                  - type: custom:weather-card
                    entity: weather.home_2
                    number_of_forecasts: '5'
                    name: Weather
          - type: vertical-stack
            cards:
              - type: entity
                entity: sensor.date_long
                icon: mdi:calendar-month
              - type: iframe
                url: >-
                  https://embed.windy.com/embed2.html<SNIP>
                aspect_ratio: 95%
          - type: custom:mod-card
            style:
              .: |
                ha-card {
                  max-width: 200px;
                  margin: 0 auto;
                }
            card:
              type: vertical-stack
              cards:
                - type: media-control
                  entity: media_player.homepod
                - type: media-control
                  entity: media_player.appletv
      - type: horizontal-stack
        cards:
          - type: custom:atomic-calendar-revive
            name: ZZZ
            enableModeChange: true
            firstDayOfWeek: 1
            maxDaysToShow: 7
            entities:
              - calendar.ZZZ
            showDate: false
            sortByStartTime: false
            showWeekDay: true
            showColors: false
            eventTitleColor: white
            showRelativeTime: false
            calShowDescription: true
            showLastCalendarWeek: false
            dimFinishedEvents: true
            locationTextSize: 100
            eventTitleSize: 100
            dateSize: 100
            defaultMode: Event
            showCurrentEventLine: false
            showMonth: true
            disableLocationLink: false
            showFullDayProgress: true
            showEventIcon: false
            showNoEventsForToday: false
            disableEventLink: true
            refreshInterval: 60
          - type: custom:atomic-calendar-revive
            name: XXX
            enableModeChange: true
            entities:
              - calendar.XXX_default
            firstDayOfWeek: 1
            maxDaysToShow: 7
            showDate: false
            sortByStartTime: false
            showWeekDay: true
            showColors: false
            eventTitleColor: white
            showRelativeTime: false
            calShowDescription: true
            showLastCalendarWeek: false
            dimFinishedEvents: true
            locationTextSize: 100
            eventTitleSize: 100
            dateSize: 100
            defaultMode: Event
            showCurrentEventLine: false
            showMonth: true
            disableLocationLink: false
            showFullDayProgress: true
            showEventIcon: false
            showNoEventsForToday: false
            disableEventLink: true
            refreshInterval: 60
          - type: custom:atomic-calendar-revive
            name: YYY
            enableModeChange: true
            entities:
              - calendar.YYY_default
            firstDayOfWeek: 1
            maxDaysToShow: 7
            showDate: false
            sortByStartTime: false
            showWeekDay: true
            showColors: false
            eventTitleColor: white
            showRelativeTime: false
            calShowDescription: true
            showLastCalendarWeek: false
            dimFinishedEvents: true
            locationTextSize: 100
            eventTitleSize: 100
            dateSize: 100
            defaultMode: Event
            showCurrentEventLine: false
            showMonth: true
            disableLocationLink: false
            showFullDayProgress: true
            showEventIcon: false
            showNoEventsForToday: false
            disableEventLink: true
            refreshInterval: 60
2

Dashboards in HA are mobile first - which is to say optimised for a small screen and allowed to adapt to larger displays. This makes it very difficult to lay dashboards out the other way round - design on a large screen and get predictable results on a smaller one.

You could try using panel mode rather than mosaic. This will use the whole width of the screen and give relatively reliable results, but it can only be used with a single card, so everything has to go in a stack or grid.

But basically, they have a life of their own. :grinning_face_with_smiling_eyes:

3

Can you not put the media control in the same vertical stack as the embedded windy so it should stay below it then.