Increase the clickable area of a card

Configuration Frontend
1

I have a card with a custom mushroom-entity-card that I’m using to toggle the kettle on and off on one of my dashboards. The trouble is, the tablet is small and the default size of the icons is even smaller. So I’ve increased the size of the icon. If I make it any bigger, the icon overlaps the text which obvioiusly isn’t great. So my options are:

  • remove the title of the card and increase the icon even bigger, or
  • figure out a way to make the area outside of the icon but inside the card clickable

Any ideas would be appreciated! Here’s my yaml and a screnshot of the card below

Screenshot-6

type: vertical-stack
cards:
    - type: custom:mushroom-entity-card
      fill_container: true
      layout: vertical
      tap_action:
        action: toggle
      entity: switch.smart_kettle_keep_warm
      name: Kettle
      icon: mdi:kettle
      card_mod:
        style: |
          :host {
            --mush-icon-symbol-size: 2em;
          }