Buttons on cards can be selected about 2 inches below the card.

[codemonkey2k5]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

This is easier to see and understand in this video:
https://github.com/user-attachments/assets/5769d386-a5cb-4b08-8b89-ea15ff1204ef

Essentially, I find that if a card has a clickable link on it and there is no card below it, you will see that you mouse has something to select well below the actual card.

Describe the behavior you expected

I would expect that only the actual clickable items on cards would be clickable, not the black space I have as a background.

Steps to reproduce the issue

1. Open Dashboard
2. move mouse to background below a card with a clickable link on it.
3. when the mouse shows that there is something to click, it will activate the link directly above your mouse in the card.

Again see the video I posted for a better understanding.
...

What version of Home Assistant Core has the issue?

2025.1.2

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue?

Google Chrome: Version 132.0.6834.84 and Microsoft Edge: Version 131.0.2903.146

Which operating system are you using to run this browser?

Microsoft Windows 11 build: 23H2

State of relevant entities

Problem-relevant frontend configuration

type: custom:room-card
title: Master Bedroom
show_icon: true
state_color: true
entity: input_boolean.single_occupancy_in_master_bedroom
tap_action:
  action: nul
  service: nul
  service_data:
    entity_id:
      - nul
card_mod:
  style: |

    @keyframes blink {
                       20% {opacity: 0;}
                     }
                     @keyframes spin {
                         from {
                             transform:rotate(0deg);
                         }
                         to {
                             transform:rotate(360deg);
                         }
                     }
     .entities-row{
       margin-left: -25px;
       padding: 0px 0px 0px 0px ;
       height: 57px;
       width: auto;
     }
     .entities-row:nth-child(2){
       margin-top: 0px;
     }
     .entities-row .entity{
       width: auto;
       height: 190px;
       margin-left: 20px !important;
       margin-right: 0px !important;
       --mdc-icon-size: 55%;
     }
     .entities-row .entity .icon-small{
       width: 50px;
       height: auto;
       margin-top: -0px;
       margin-left: -0px;
     }
     .entities-info-row{
       padding: 0px;
       width: 108px;
       margin: -10px -06px;
       margin-right: -35px !important;
     }
     .entities-info-row .entity{
       !border: 1px solid red;

       --mdc-icon-size: 60% !important;
       margin-left: 0px !important;
       
     }
     .entities-info-row .entity .icon-small{
       width: 50px;
       height: auto;
       !border: 1px solid red;
     }
     .main-icon{
       height: 50px ;
       width:50px !important;
       margin-top: 5px !important;
     }
     .main-state{
       margin-top: 1px;
       max-width: none;
       max-height: none;    
       border-radius: 100%;
       height: auto;
     }
     .title{
       font-weight: 500;
       margin-top: -2px;
     }
card_styles:
  "--ha-card-header-font-size": 16px
  "--mdc-icon-size": 50%
styles:
  template: >
    if (entity.state == 'on' & entity.attributes.rgb_color!=null) return
    'background-color: rgba(' + entity.attributes.rgb_color + ',0.15) ';   if
    (entity.state == 'on' & entity.attributes.rgb_color==null) return
    'background-color: rgba(var(--rgb-accent-color),0.15); ';  else return
    'background-color: rgba(var(--rgb-disabled-color),0.2);'
icon:
  template:
    icon: null
templates:
  - name: info_icon_entity
    template:
      show_icon: true
      state_color: false
      styles:
        template: |
          return 'width: auto; --mdc-icon-size: 50%;'
      icon:
        template:
          styles: >
            if (entity.state == "on") return 'color: var(--accent-color)
            !important;';  if (entity.state == "unavailable") return 'color: red
            !important;'; else return 'color: var(--disabled-color)
            !important;';
  - name: info_window_icon_entity
    template:
      show_icon: false
      state_color: false
      styles:
        template: |
          return 'width: auto; --mdc-icon-size: 50%;'
      icon:
        template:
          styles: >
            if (entity.state == "on") return 'color: var(--accent-color)
            !important;';  if (entity.state == "unavailable") return 'color: red
            !important;';  if (entity.state == "off") return 'color: green
            !important;';else return 'color: var(--disabled-color)
            !important;';  
  - name: info_text_entity
    template:
      show_icon: false
      state_color: true
      styles:
        template: |
          if (entity.state == "unavailable") return 'color: red !important;';
          else return 'width: auto; font-size: 75%; color: grey;';
  - name: light_button
    template:
      show_icon: true
      state_color: true
      show_name: false
      styles:
        template: >
          if (entity.state == 'on') return 'background-color: rgba(' +
          entity.attributes.rgb_color + ',0.15); border-radius: 50%; border: 1px
          solid var(--divider-color);';  else return 'background-color:
          rgba(var(--rgb-disabled-color),.2); border-radius: 50%; border: 1px
          solid var(--divider-color);';
      icon:
        template:
          styles: |
            return 'color: var(--disabled-color) !important;';
  - name: cover_button
    template:
      show_icon: true
      state_color: false
      show_name: false
      styles:
        template: >
          if ((entity.state == "closed") || (entity.attributes.current_position
          < 50)) return 'background-color: rgba(var(--rgb-accent-color),.2);
          border-radius: 50%;  border: 1px solid var(--divider-color);';  else
          return 'background-color: rgba(var(--rgb-disabled-color),.2);
          border-radius: 50%;  border: 1px solid var(--divider-color);';
      icon:
        template:
          icon: >
            if (entity.attributes.current_position < 10 ) { if
            (entity.entity_id.includes('fenster')) return
            'kuf:fts_garage_door_100'; else return 'mdi:window-shutter'};   if
            (entity.attributes.current_position < 20 ) return
            'kuf:fts_shutter_90';   if (entity.attributes.current_position < 30
            ) return 'kuf:fts_shutter_80';   if
            (entity.attributes.current_position < 40 ) return
            'kuf:fts_shutter_70';    if (entity.attributes.current_position < 50
            ) return 'kuf:fts_shutter_60';   if
            (entity.attributes.current_position < 60 ) return
            'kuf:fts_shutter_50';   if (entity.attributes.current_position < 70
            ) return 'kuf:fts_shutter_40';   if
            (entity.attributes.current_position < 80 ) return
            'kuf:fts_shutter_30';   if (entity.attributes.current_position < 90
            ) return 'kuf:fts_shutter_20';   else { if
            (entity.entity_id.includes('fenster')) return 'kuf:fts_shutter_10';
            else return 'mdi:window-shutter-open'};
  - name: entity_button
    template:
      show_icon: true
      state_color: true
      show_name: false
      styles:
        template: >
          if (entity.state == "on") return 'background-color:
          rgba(var(--rgb-accent-color),.2); border-radius: 50%;  border: 1px
          solid var(--divider-color);';  else return 'background-color:
          rgba(var(--rgb-disabled-color),.2); border-radius: 50%;  border: 1px
          solid var(--divider-color);';
      icon:
        template:
          styles: >
            if (entity.state == "on") return 'color: var(--accent-color)
            !important; width: auto; height: auto;'; else return 'color:
            var(--disabled-color) !important; width: auto; height: auto;';
  - name: climate_button
    template:
      show_icon: false
      state_color: true
      show_name: false
      styles:
        template: >
          return 'background-color: rgba(var(--rgb-disabled-color),.5) ;
          border-radius: 10px 10px 10px 10px; font-size: 13px; width: 55px ;
          height: auto ; padding: .2% ; border: 1px solid
          var(--disabled-color);';

            if (entity.state < 72) return 'color: blue'; if (entity.state >= 72)
            return 'color: grey'; if (entity.state >= 75) return 'color: orange'; 
            if (entity.state >= 78) return 'color: red';
      icon:
        template:
          styles: |
            return 'color: var(--disabled-color) !important;';
info_entities:
  - entity: binary_sensor.open_close_sensor_14_48_29
    state_color: true
    name: Status LEDs
    icon: mdi:window-open
    show_icon: true
    tap_action:
      action: nul
  - entity: sensor.mstrbr_thermometer_temperature
    template: climate_button
rows:
  - entities:
      - entity: light.overhead_light_mb
        name: Light
        icon: mdi:ceiling-fan-light
        show_icon: true
        state_color: true
        tap_action:
          action: toggle
      - entity: light.master_closet_light
        state_color: true
        name: Closet Light
        icon: mdi:wardrobe
        show_icon: null
        tap_action:
          action: toggle
      - entity: light.vanity_wall_switch
        name: Vanity Light
        icon: mdi:vanity-light
        show_icon: null
        tap_action:
          action: toggle
      - entity: switch.overhead_fan_mb
        name: Fan
        show_icon: true
        tap_action:
          action: toggle
        icon:
          conditions:
            - condition: equals
              value: "on"
              icon: mdi:fan
              styles:
                color: red
                animation: spin 1.5s linear infinite
            - condition: equals
              value: "off"
              icon: mdi:fan

Javascript errors shown in your browser console/inspector

Additional information

This is not an urgent bug, but it can be a little annoying.

[karwosts]

You won't get support for custom room-card or any cards with card-mod on them here.

Please reproduce with a stock card with no mods if you want this to be looked into.