Click area limited to left side when using mushroom-card inside stack-in-card

[Animizio]

• [ X ] I updated to the latest version available
• [ X ] I cleared the cache of my browser

Release with the issue: 0.2.0

The problem

When using a mushroom-template-card inside a stack-in-card, the clickable area is limited to the left side of the card, even though the card itself spans the full width.

Expected behavior

The entire card should be clickable, as it is when using the mushroom-template-card standalone.

Current behavior

Only the left portion of the card is clickable, although the visual elements span the full width.

Reproduction steps

1. Create a dashboard with this code:
   `type: vertical-stack
   cards:

• type: custom:stack-in-card
  card_mod:
  style: |
  ha-card {

  {% if states('calendar.ovulationsphase') == "on" %}background:
  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  url('/local/person/valentina/ovulando.jpg');
  
  {% else %}background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  url('/local/person/valentina/casa.jpg');
  
  {% endif %}
    background-position: center;
    background-size: cover;
    border: 0px;
  }
  

  cards:

  • type: custom:mushroom-template-card
    primary: ""
    secondary: ""
    icon: mdi:home
    picture: >
    {% if states('calendar.ovulationsphase') == "on"
    %}/local/person/valentina/ovulando.jpg

    {% else %}/local/person/valentina/casa.jpg

    {% endif %}
    tap_action:
    action: navigate
    navigation_path: "#Zyklus_Valentina"
    card_mod:
    style: |
    ha-card {
    border: 0px;
    }

  • type: custom:atomic-calendar-revive
    defaultMode: Event
    noEventsForNextDaysText: Zwischenphasen
    showEventIcon: true
    showRelativeTime: true
    showAllDayHours: false
    showMonth: true
    showWeekDay: true
    entities:

    • entity: calendar.menstruationsphase
      icon: mdi:water
      color: pink
    • entity: calendar.ovulationsphase
      icon: mdi:flower
      color: pink
      card_mod:
      style: |
      ha-card {
      margin-left: 50px;
      margin-top: -60px;
      border: 0px;
      }
      .relative-time {
      margin-top: -20px;
      color: white!important;
      }
      .event-date-week-day{
      color: white!important;
      }
      .event-date-month{
      color: white!important;
      }
      .event-date-day{
      color: white!important;
      }

• type: vertical-stack
  cards:

  • type: custom:bubble-card
    card_type: pop-up
    name: Menstruationszyklus
    icon: mdi:gender-female
    hash: "#Zyklus_Valentina"

  • type: custom:stack-in-card
    card_mod:
    style: >
    ha-card {

    {% if states('calendar.ovulationsphase') == "on"
    
    %}background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    
    url('/local/person/valentina/ovulando.jpg');
    
    
    {% else %}background: linear-gradient(rgba(0,0,0,0.5),
    rgba(0,0,0,0.5)),
    
    url('/local/person/valentina/casa.jpg');
    
    
    {% endif %}
      background-position: center;
      background-size: cover;
      height: 150px!important;
      --primary-text-color: white;
    }  
    

    cards:

    • type: custom:mushroom-template-card
      primary: >
      {% if states('calendar.ovulationsphase') == "on" %}Ovulationsphase

      {% elif states('calendar.menstruationsphase') == "on"
      %}Menstruationsphase

      {% else %}Zwischenphasen

      {% endif %}
      secondary: ""
      icon: |
      {% if states('calendar.ovulationsphase') == "on" %}mdi:flower
      {% elif states('calendar.menstruationsphase') == "on" %}mdi:water
      {% else %}mdi:gender-female
      {% endif %}
      icon_color: white
      layout: vertical
      tap_action:
      action: none
      card_mod:
      style: |
      ha-card { margin-top:30px; }

  • type: custom:bubble-card
    card_type: separator
    name: Kalender
    icon: mdi:calendar-month

  • type: custom:atomic-calendar-revive
    defaultMode: Calendar
    entities:

    • entity: calendar.menstruationsphase
      icon: mdi:water
      color: crimson
    • entity: calendar.ovulationsphase
      icon: mdi:flower
      color: pink
      showMultiDay: true
      showLastCalendarWeek: false
      calShowDescription: false
      disableCalEventLink: true
      disableCalLocationLink: false
      disableCalLink: true
      dimFinishedEvents: false
      hideDuplicates: false
      showLoader: false
      compactMode: false
      card_mod:
      style: |
      ha-card {
      background: transparent;
      border: 0px;
      box-shadow: none;
      margin-top: -50px;
      margin-bottom: -50px;
      height: 350px!important;
      padding: 0px!important;
      }
      .calDateSelector {
      visibility: hidden;
      }
      .summary-event-div {
      visibility: hidden;
      }
      .summary-fullday-div-accepted {
      visibility: hidden;
      }
      .calIcon {
      --mdc-icon-size: 15px !important;
      }
      td.cal {
      background: linear-gradient(330deg, rgba(52,25,43,1), rgba(64,34,54,1));
      --cal-day-color: white!important;
      }
      .currentDay {
      background: #85747f!important;
      }

  • type: custom:bubble-card
    card_type: separator
    name: Demnächst
    icon: mdi:timelapse
    card_mod:
    style: |
    ha-card {
    margin-bottom: -10px;
    }

  • type: custom:atomic-calendar-revive
    defaultMode: Event
    noEventsForNextDaysText: Zwischenphasen
    showEventIcon: true
    showRelativeTime: true
    showAllDayHours: false
    showMonth: true
    showWeekDay: true
    entities:

    • entity: calendar.menstruationsphase
      icon: mdi:water
      color: pink
    • entity: calendar.ovulationsphase
      icon: mdi:flower
      color: pink
      card_mod:
      style: |
      ha-card {
      background: transparent!important;
      box-shadow: none!important;
      border: 0px;
      margin-left: 5px;
      margin-right: 5px;
      padding: 0px!important;
      }
      .relative-time {
      margin-top: -20px;
      }
      `

2. Try to click different areas of the card

• Left side: Opens popup as expected
• Center/Right side: No reaction

Environment

• Home Assistant version: latest OS with HACS
• stack-in-card version: 0.2.0
• mushroom-cards version: 4.0.8

Additional information

• The same mushroom-template-card works correctly (fully clickable) when used standalone without stack-in-card
• This is how it should look like: https://aguacatec.es/wp-content/uploads/2024/02/Screenshot_20240212-172439-1024x213.png