expandable f7-card not getting focus when used in an oh-masonry framework

[jsjames]

See https://community.openhab.org/t/expandable-card-is-blurry-when-expanded-in-oh-masonry/138125/8

It appears that the surrounding <div> around the oh-masonry should include a z-index value in order to place higher on the z stack. The oh-block operates correctly and has a higher z-index than the background

Expected behavior

When f7-card is expanded, it should be the focus.

Steps to reproduce

Your environment

Running Openhab 3.3.0 on raspberry pi.

config:
  label: Scratch
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: widget:ExpandableCardTest
                config: {}
masonry:
  - component: oh-masonry
    slots:
      default:
        - component: widget:ExpandableCardTest
          config: {}
grid: []
canvas: []

uid: ExpandableCardTest
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Aug 15, 2022, 7:10:06 AM
component: f7-card
config:
  hideNavbarOnOpen: false
  class: lazy no-margin
  expandable: true
  style:
    border-radius: 6px
    height: 9.6em
    width: 17em
slots:
  default:
    - component: f7-card-content
      config:
        class: lazy card-opened-fade-in
        style:
          color: white
          background-image: url("https://source.unsplash.com/category/nature")
          background-size: 100% auto
          background-position: center
          background-repeat: no-repeat
      slots:
        default:
          - component: oh-link
            config:
              class: card-prevent-open
              style:
                margin: 0em 0.25em 0 -0.7em
                color: var(--f7-card-text-color)
                opacity: 0.4
                z-index: 99
              visible: true
              iconF7: power
              iconSize: 22
              round: true
              action: toggle
              actionItem: =props.switchItem
              actionCommand: ON
              actionCommandAlt: OFF
          - component: oh-link
            config:
              visible: true
              class: card-prevent-open
              style:
                margin: 0 0.25em
                color: var(--f7-card-text-color)
                opacity: 0.4
                z-index: 99
              iconF7: gear_alt
              iconSize: 22
              round: true
              action: group
    - component: f7-card-content
      config:
        class: lazy card-opened-fade-out
        style:
          color: white
          background-image: url("https://source.unsplash.com/category/interiors")
          background-size: 17rem 10rem
          background-repeat: no-repeat
          border-radius: 6px
      slots:
        default:
          - component: oh-link
            config:
              class: card-prevent-open
              style:
                margin: 0em 0.25em 0 -0.7em
                color: "=(items[props.switchItem].state === 'ON') ? 'cyan' : 'white'"
                opacity: "=(items[props.switchItem].state === 'ON') ? '1' : '0.3'"
              visible: true
              iconF7: power
              iconSize: 22
              round: true
              action: toggle
              actionItem: =props.switchItem
              actionCommand: ON
              actionCommandAlt: OFF
          - component: oh-link
            config:
              visible: true
              class: card-prevent-open
              style:
                margin: 0 0.25em
                color: var(--f7-card-text-color)
                opacity: 0.4
              iconF7: gear_alt
              iconSize: 22
              round: true
              action: group

Browser console

Browser network traffic

Additional information