grid-layout: Unable to hide individual card when mediaquery not matched

[ghost]

My Home Assistant version: 2023.02.5

Layout-card version (FROM BROWSER CONSOLE): 2.4.4

What I am doing:

• Using custom:grid-layout:
• Trying to hide a single custom:gap-card in a vertical-stack on my iPhone in portrait

What I expected to happen: I expect the card to not show on my iPhone in portrait

What happened instead: card always shows show: works fine at the grid-area level

Minimal steps to reproduce:

• using markdown to demo problem
• grid-area test1 works (at grid-area level)
• grid-area test2 doesn't work (at card level)

title: Overview
type: custom:grid-layout
layout:
  grid-template-columns: auto
  grid-template-rows: auto
  grid-template-areas: |  
    "test1"
    "test2"
cards:
- type: markdown
  view_layout:
    grid-area: test1
    show:
      mediaquery: "(min-width: 500px)"
  content: |
    works: I can't see this on my iPhone in portrait
- type: vertical-stack
  view_layout:
    grid-area: test2
  cards:
  - type: markdown
    content: |
      I should see this everywhere
  - type: markdown
    view_layout:
      show:
        mediaquery: "(min-width: 500px)"
    content: |
      doesn't work: I shouldn't see this on my iPhone in portrait

Error messages from the browser console: no error

By putting an X in the boxes ([X]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• [x] Have made sure I am using the latest version of the plugin.
• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[dsellers1]

To me, it seems the issue is with using the vertical-stack card. When I removed that from your code, changed the type to custom:layout-card and added layout_type: custom:grid-layout, this worked for me.

title: Overview
type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: auto
  grid-template-rows: auto
  grid-template-areas: |
    "test1"
    "test2"
cards:
- type: markdown
  view_layout:
    grid-area: test1
    show:
      mediaquery: "(min-width: 500px)"
  content: |
    works: I can't see this on my iPhone in portrait
- type: markdown
  content: |
    I should see this everywhere
- type: markdown
  view_layout:
    show:
      mediaquery: "(max-width: 500px)"
  content: |
    doesn't work: I shouldn't see this on my iPhone in portrait

When I change the max-width at the bottom to 2500px (I'm on PC), the card appeared. Changing the min-width for test1 to 2500px and max-width for test2 to 2500px confirmed it would hide the first one.