Issue with Media Player Icon (z-index?) appears in front of sticky moving card

[UberDudePL]

For any feature request you can open a new discussion here:
https://github.com/Clooos/Bubble-Card/discussions/categories/feature-requests

For any question you can open a new discussion here:
https://github.com/Clooos/Bubble-Card/discussions/categories/q-a

Describe the bug
When applying Position Sticky to Bubble card of sub-buttons. When it hover over media player bubble card. The icon of Media card goes over sticky card.

To Reproduce
Steps to reproduce the behavior:

1. Add bubble Media bubble card
2. Add sub-button bubble card as sticky

Expected behavior
Sticky Bubble card will hover over whole Media Player card including it's icon

Screenshots

YAML
If applicable, add any relevant YAML code.

  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.salon
    name: Salon
    force_icon: false
    show_name: true
    show_state: false
    show_last_changed: false
    show_attribute: false
    scrolling_effect: true
    hide:
      power_button: true

  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.lampa
    name: Lampa
    force_icon: false
    show_name: true
    show_state: false
    show_last_changed: false
    show_attribute: false
    scrolling_effect: true
    hide:
      power_button: true
- type: custom:bubble-card
            card_type: button
            card_layout: large
            button_type: name
            show_icon: false
            show_name: false
            sub_button:
              - name: Drzwi
                entity: lock.drzwi
                show_background: false
                tap_action:
                  action: toggle
              - name: Shutters
                entity: switch.gniazdkobiurkokrzys
                icon: mdi:window-shutter
                show_background: false
                tap_action:
                  action: navigate
                  navigation_path: "#Shutters"
              - name: AirCon
                icon: mdi:tailwind
                show_background: false
                tap_action:
                  action: navigate
                  navigation_path: "#Aircon"
              - name: Security
                icon: mdi:video
                show_background: false
                tap_action:
                  action: navigate
                  navigation_path: "#Camera"
              - name: Wylacza
                icon: mdi:power-off
                show_background: false
                tap_action:
                  action: call-service
                  navigation_path: script.off
            styles: |
              .card-content {
                width: 100%;
                margin: 0 !important;
              }
              .bubble-button-card-container {
                background: var(--ha-card-background);
              }
              .bubble-sub-button {
                height: 46px !important;
                width: 46px !important;
              }
              .bubble-sub-button-container {
                width: 100%;
                align: center;
                justify-content: center !important;
              }
              .bubble-sub-button-icon {
                --mdc-icon-size: inherit !important;
              }
              .bubble-name-container {
                margin-right: 0px !important;
              }
            card_mod:
              style: |
                :host {
                  position: sticky !important;
                  bottom: 26px;
                  margin-bottom: 10px !important;
                  animation: 1.2s position ease-in-out;
                }
                @keyframes position {
                  0% { bottom: -80px; }
                  20% { bottom: -80px; }
                  70% { bottom: 26px; }
                  90% { bottom: 24px; }
                  100% { bottom: 26px; }
                }
                @media (prefers-color-scheme: dark) {
                  :host:before {
                    content: '';
                    display: block;
                    position: absolute;
                    bottom: -26px;
                    left: -8px;
                    padding-right: 16px;
                    height: 130px;
                    width: 100%; 
                    background: linear-gradient(180deg, rgba(57, 54, 70, 0) 0%, rgba(57, 54, 70, 0.85) 100%);
                    pointer-events: none;
                    animation: 1.2s opacity ease-in-out;
                  }
                }
                @media (prefers-color-scheme: light) {
                  :host:before {
                    content: '';
                    display: block;
                    position: absolute;
                    bottom: -26px;
                    left: -8px;
                    padding-right: 16px;
                    height: 130px;
                    width: 100%; 
                    background: linear-gradient(180deg, rgba(239, 241, 245, 0) 0%, rgba(239, 241, 245, 0.85) 100%);
                    pointer-events: none;
                    animation: 1.2s opacity ease-in-out;
                  }
                }
                @keyframes opacity {
                  0% { opacity: 0; }
                  20% { opacity: 0; }
                  100% { opacity: 1; }
                }
            view_layout:
              grid-area: "sticky"

Informations (please complete the following information):

• OS: iOS, Android, MacOS, Windows
• Browser/App: Safari, Chrome, Edge, HA App
• Bubble Card version: Latest
• Home Assistant version: Latest Additional context
  I thought that maybe it is connected to z-index, I've tried to apply it to ha-card in Card Mod but it didn't work, I've used 1-10, one by one as option. Did not work for me

Thank you! 🍻

[Clooos]

Hi, I've worked on this issue in the new beta, can you tell me if it's working now? 🤞

https://github.com/Clooos/Bubble-Card/releases/tag/v2.3.0-beta.2

[UberDudePL]

Hey, Apologies for late reply. Yes, it is resolved in newest beta! Proceeding to closure. Thank you