Companion iOS App Grid Layout

[woodmj74]

Hi, not sure if this is an issue with the app, the latest version of the card (which by the way is great), or me! Any pointers would be gratefully received...

I have a dashboard set up in a grid with the following configuration:

  - title: Lights
    background: center / cover no-repeat url("/local/blue-back2.jpg") fixed
    path: ''
    panel: false
    icon: 'mdi:lightbulb-outline'
    type: 'custom:grid-layout'
    layout:
      grid-template-columns: 30% 30% 30%
      grid-template-rows: auto
      grid-template-areas: |
        "p11 p12 p13"
        "p21 p22 p23"
      mediaquery:
        '(max-width: 800px)':
          grid-template-columns: 95%
          grid-template-areas: |
            "p11"
            "p12"
            "p13"
            "p21"
            "p22"
            "p23"

Followed by a series of cards similar to this

      - type: vertical-stack
        cards:
          - type: markdown
            content: '### Ground'
            style: |
              ha-card {
                opacity: 50%
              }
          - type: grid
            cards:
              - type: 'custom:button-card'
                template: standard_button
                entity: group.porch
                icon: 'mdi:door'
//repeating//
            columns: 3
            square: false
        layout:
          grid-area: p11

which renders something like this:

Reducing the screen size on desktop plays nicely with the responsive setup.

However, when I open this in the Home Assistant app the dashboard needs a "kick" (achieved by flipping the screen and back again) to get it to acknowledge the responsiveness.

Made a simple version with four markdown cards and the same behaviour was demonstrated:

  - title: People Places
    path: people-places
    background: center / cover no-repeat url("/local/blue-back2.jpg") fixed
    icon: 'mdi:motion-sensor'
    panel: false
    type: 'custom:grid-layout'
    layout:
      grid-template-columns: 25% 25% 25%
      grid-template-rows: auto
      grid-template-areas: |
        "one two three four"
      mediaquery:
        '(max-width: 800px)':
          grid-template-columns: 95%
          grid-template-areas: |
            "one"
            "two"
            "three"
            "four"
    badges: []
    cards:
      - type: markdown
        content: '# Always Show Me'
        layout:
          grid-area: one
      - type: markdown
        content: '### BIG ONLY: min-width: 800px'
        layout:
          grid-area: two
          show:
            mediaquery: '(min-width: 800px)'
      - type: markdown
        content: '### SMALL ONLY max-width: 800px'
        layout:
          grid-area: three
          show:
            mediaquery: '(max-width: 800px)'
      - type: markdown
        content: '# Always Show Me'
        layout:
          grid-area: four

[woodmj74]

Tested outside of the app via a browser and it demonstrated the same behaviour

[thomasloven]

This should be fixed with 2.1.1 There's a button to reset frontend cache at the bottom of the app settings page. Clearing the cache in the browser is harder. It may be some time before you see the difference.

[woodmj74]

Thanks - upgraded and the app seems fine now (which was my main concern!)