Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

So, so cool!!! Thank you very much Dimitri. Worked right “out of the Box”. :rofl:

Ups, works with clicking on the icon, but on my ANDROID mobile, nothing happens… :grimacing: Not quite correct: If running HA from a browser it works, does not from the app. Ok, so this is a cool solution, but just not for the app!

Is there a way to add like a close button? Because this “just” pops up the map, without a “close” option.

Thanks again for your help!

Should work just fine on the Android or IOS apps. check the installation and setup instructions for Browser Mod just to make sure it is set up correctly.

When it comes closing the popup with browser mod not really a good way to do that. clicking outside of the popup or on android clicking the back button built into android itself closes the popup. but especially for IOS right now it is annoying as there is a bug where all popups come up in full screen so you cant even tap outside of it…

1 Like

You are again correct. I closed the app and deleted the cache. Working on my mobile devices!!! :ok_hand:

1 Like

Something like this:
Untitled video - Made with Clipchamp (92)

you will likely need to play with the left: 44.5px value depending on your screen size. it is hard to make things universal when you are overlaying multiple cards (or in this case chips).

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:washing-machine
    icon_color: orange
  - type: template
    icon: mdi:washing-machine
    icon_color: orange
    card_mod:
      style: |
        ha-card {
          left: -44.5px;
          top: 0px;
          background: none !important;
          border: none !important;
        }
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: shake 400ms ease-in-out infinite;
        transform-origin: 50% 58%;
        clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
        filter: drop-shadow(2px 2px 3px rgba(var(--rgb-black), 0.4));
      }
      @keyframes shake {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
        40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
        60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
        80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
      }
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: spin 1s linear infinite;
        transform-origin: 50% 58%;
        clip-path: circle(21.7% at 50% 58%);
      }
      @keyframes spin {
        0% { transform: rotate(0); }
        100%  { transform: rotate(360deg); }
      }
3 Likes

You have gotten rid of your stack in card before every one of your grid cards :slight_smile:

square: true
type: grid
cards:
  - type: custom:stack-in-card
    mode: vertical
    square: false
    cards:
      - square: false
        type: grid
        columns: 2
        cards:

So the above should be the start to every one of your individual cards. currently you only start with the grid. not the stack in card :slight_smile:

What yours looks like:

square: true
type: grid
cards:
  - square: false
    type: grid
    columns: 2
    cards:

to sping only chip icon you may use mushroom-template-chip:nth-child(#)$

chrome-capture-2023-7-24

example:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:cookie
    icon_color: brown
    content: 1 Cookie
  - type: template
    icon: mdi:cookie
    icon_color: brown
    content: 2 Cookies
card_mod:
  style:
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: rotation 1s linear infinite;
      }
      @keyframes rotation {
        100% {
          transform: rotate(360deg);
        }
      }
1 Like

Works like a charm.
Thank you so much.

Tnx, it works great!

1 Like

How do I make all my cards to do a “push in” animation without editing the code manually for each card?

Hi,

I’m using a mushroom template card and instead of an mdi:icon I’m using a custom .PNG image.

How can I animate the image without animating the entire card when the Fan is on?

Off
image

On
image

This is the code of the card at the moment:

type: custom:mushroom-template-card
primary: Fan
secondary: |-
  {% if states(config.entity)=='on' %}
    On
  {% else %}
    Off
  {% endif %}
icon: ''
icon_color: ''
entity: switch.fan
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none
badge_color: ''
badge_icon: ''
picture: |-
  {% if states(config.entity)=='on' %}
    /local/Custom_Icons/TEST/v3/FAN_ON.png
  {% else %}
    /local/Custom_Icons/TEST/v3/FAN_OFF.png
  {% endif %}

Thank you

Check out this post towards the bottom. and then look at the example on how to edit it in the theme instead :slight_smile:

1 Like

This should do it if you have card-mod installed :slight_smile:

type: custom:mushroom-template-card
primary: Fan
secondary: |-
  {% if states(config.entity)=='on' %}
    On
  {% else %}
    Off
  {% endif %}
icon: ''
icon_color: ''
entity: switch.fan
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none
badge_color: ''
badge_icon: ''
picture: |-
  {% if states(config.entity)=='on' %}
    /local/Custom_Icons/TEST/v3/FAN_ON.png
  {% else %}
    /local/Custom_Icons/TEST/v3/FAN_OFF.png
  {% endif %}
card_mod:
  style:
    mushroom-shape-avatar$: |
      img {
        {% if states(config.entity)=='on' %}
          animation: spin 2s linear infinite;
        {% else %}

        {% endif %}
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
2 Likes

Thank you for both the links to the animations and for providing the example code!

1 Like

Hi,

Using the Climate mushroom card, I’d like to control my Daikin AC. It’s connected through KNX (with a Zennio Klic-DD interface) and it’s working mostly fine.

Only annoying thing is when I press the AC button (marked yellow), the AC always starts in HEATING mode. When I check ETS (config tool KNX), I see that HA sends an ON to the ON/OFF group address AND an ON to the MODE address. My interface interprets the ON (or 1) as HEATING, but I cannot change this.

As my AC is 95% in Cooling mode, I’d prefer to have this start up in cooling mode directly.

When I go in mode control in this card and I press the blue button, the AC starts up directly in cooling mode. The power button next to it only stops the AC. It doesn’t toggle ON/OFF.


Set up a script that does what you want it to do when you press the card. Then change the tap action to run your script instead.

Something like this:

type: custom:mushroom-climate-card
entity: climate.bedroom_heating
collapsible_controls: true
show_temperature_control: true
hvac_modes:
  - heat
  - cool
  - 'off'
  - auto
tap_action:
  action: call-service
  service: script.your_script_id_here
  target: {}

The other buttons in mode control will work as they do now. But the “ac” button will now run your script instead of the default which is just to toggle the entity specified.

1 Like

This is amazing work.
I’ve tried to implement it today and got pretty far, but unfortunately the popup just seems to be slightly too small resulting in both horizontal and vertical scroll bars. It also looks like the avatar icon is a lot bigger than in your screenshot.
Any ideas?

1 Like

:clap: post your yaml! :clap:

:wink:

2 Likes

Oops… :smiley:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.robert
    content_info: none
    use_entity_picture: true
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Robert
          content:
            type: vertical-stack
            cards:
              - type: custom:mushroom-entity-card
                entity: person.robert
                layout: horizontal
                icon_type: entity-picture
                primary_info: state
                secondary_info: last-changed
                tap_action:
                  action: none
                hold_action:
                  action: none
                card_mod:
                  style:
                    mushroom-shape-avatar$: |
                      .picture {

                        /* Style shadow ring around person avatar */                              
                        box-shadow: 0px 0px 4px 2px var(--state-person);
                        margin-right: var(--mush-title-spacing, 12px);
                      }
                    .: |
                      ha-card {

                        /* Remove default card styling */
                        --ha-card-background: none;
                        box-shadow: none;
                        --ha-card-border-width: 0;

                        /* Increase icon size */
                        --icon-size: 72px;

                        /* Center card */
                        margin: auto;
                        width: fit-content;

                        /* Add padding to bottom of card */
                        padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
                        
                        /* Make card non-responsive to select and pointer */
                        user-select: none;
                        pointer-events: none;
                        
                        transition: all 0s;
                      }
                      :host {

                        /* Define Person State colors. Can be added to theme */
                        --state-person-home: var(--green-color);
                        --state-person-not-home: var(--red-color);
                        --state-person-zone: var(--blue-color);
                        --state-person-unknown: var(--grey-color);

                        /* Set Person State color */
                        --state-person:
                        {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                          var(--state-person-{{ states(config.entity) | replace('_', '-') }})
                        {% else %}
                          var(--state-person-zone)
                        {% endif %};

                        /* Match styling to Mushroom Title */
                        --mush-card-primary-font-size: var(--mush-title-font-size, 24px);
                        --mush-card-primary-font-weight: var(--mush-title-font-weight, normal);
                        --mush-card-primary-line-height: var(--ush-title-line-height, 1.2);
                        --mush-card-secondary-font-size: var(--mush-title-font-size, 16px);
                        --mush-card-secondary-font-weight: var(--mush-title-font-weight, normal);
                        --mush-card-secondary-line-height: var(--ush-title-line-height, 1.2);
                      }
              - type: history-graph
                entities:
                  - entity: person.robert
                    name: ' '
                hours_to_show: 24
                title: Timeline
                card_mod:
                  style:
                    $: |
                      .card-header {

                        /* Style timeline title */
                        padding: 0px 24px !important;
                        font-size: var(--mush-card-primary-font-size, 14px) !important;
                        font-weight: var(--mush-card-primary-font-weight, bold) !important;
                        line-height: var(--mush-card-primary-line-height, 1.5) !important;
                        color: var(--primary-text-color) !important;
                      }
                    .: |
                      ha-card {

                        /* Remove default card styling */
                        --ha-card-box-shadow: none;
                        --ha-card-background: none;
                        --ha-card-border-width: 0;
                        user-select: none;
                      }
                      .content {

                        /* Add padding on right */
                        padding: 0px 24px !important;
                      }
              - type: horizontal-stack
                cards:
                  - type: conditional
                    conditions:
                      - entity: sensor.robert_travel_time_to_home
                        state_not: unknown
                    card:
                      type: custom:mushroom-template-card
                      primary: >-
                        {{ states(entity) }} {{ state_attr(entity,
                        'unit_of_measurement') }}
                      secondary: '{{ state_attr(entity, ''distance'') | round(1) }} km'
                      icon: mdi:map-marker-path
                      entity: sensor.robert_travel_time_to_home
                      layout: vertical
                      icon_color: purple
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      double_tap_action:
                        action: none
                      card_mod:
                        style:
                          mushroom-state-info$: |
                            .primary:after {

                              /* Add destination details */
                              content: "\Ato Home";
                              white-space: pre;
                              text-overflow: ellipsis;
                            }
                          .: |
                            ha-card {

                              /* Remove default card styling */
                              --ha-card-background: none;
                              --ha-card-box-shadow: none;
                              --ha-card-border-width: 0;

                              /* Center card on row */
                              width: fit-content;
                              margin: auto;

                              /* Make card non-responsive to select and pointer */
                              user-select: none;
                              pointer-events: none;
                            }
              - type: horizontal-stack
                cards:
                  - type: conditional
                    conditions:
                      - entity: sensor.robert_travel_time_to_work
                        state_not: unknown
                    card:
                      type: custom:mushroom-template-card
                      primary: >-
                        {{ states(entity) }} {{ state_attr(entity,
                        'unit_of_measurement') }}
                      secondary: '{{ state_attr(entity, ''distance'') | round(1) }} km'
                      icon: mdi:map-marker-path
                      entity: sensor.robert_travel_time_to_work
                      layout: vertical
                      icon_color: purple
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      double_tap_action:
                        action: none
                      card_mod:
                        style:
                          mushroom-state-info$: |
                            .primary:after {

                              /* Add destination details */
                              content: "\Ato Work";
                              white-space: pre;
                              text-overflow: ellipsis;
                            }
                          .: |
                            ha-card {

                              /* Remove default card styling */
                              --ha-card-background: none;
                              --ha-card-box-shadow: none;
                              --ha-card-border-width: 0;

                              /* Center card on row */
                              width: fit-content;
                              margin: auto;

                              /* Make card non-responsive to select and pointer */
                              user-select: none;
                              pointer-events: none;
                            }
                  - type: custom:mushroom-template-card
                    primary: '{{ states(entity) }}%'
                    secondary: >
                      {{ 'charging' if
                      is_state('binary_sensor.robert_phone_is_charging', 'on' )
                      else 'discharging' }}
                    icon: >
                      {% set battery_level = (states(entity) | int / 10) |
                      round(0) | int * 10 %}

                      {% if battery_level == 100 %}
                        mdi:battery
                      {% elif battery_level > 0 %}
                        mdi:battery-{{ battery_level }}
                      {% else %}
                        mdi:battery-alert-variant-outline
                      {% endif %}
                    icon_color: |-
                      {% set battery_level = states(entity) | int %}
                      {% if battery_level > 90 %} 
                        green
                      {% elif battery_level > 60 %}
                        light-green
                      {% elif battery_level > 50 %}
                        lime
                      {% elif battery_level > 40 %}
                        yellow
                      {% elif battery_level > 30 %}
                        amber
                      {% elif battery_level > 20 %}
                        orange
                      {% elif battery_level > 10 %}
                        deep-orange
                      {% else %}
                        red
                      {% endif %} 
                    entity: sensor.robert_phone_battery_level
                    layout: vertical
                    badge_icon: >-
                      {% if is_state('binary_sensor.robert_phone_is_charging',
                      'on') %}
                        mdi:lightning-bolt
                      {% elif states(entity) | int < 10 %} 
                        mdi:exclamation-thick
                      {% endif %}
                    badge_color: '{{ ''red'' if states(entity) | int < 10 else ''light-blue'' }}'
                    tap_action:
                      action: none
                    hold_action:
                      action: none
                    double_tap_action:
                      action: none
                    card_mod:
                      style:
                        mushroom-shape-icon$: |
                          .shape {

                            /* Radial progress bar */
                            background: radial-gradient(var(--card-background-color) 60%, 
                                                        transparent calc(60% + 1px)), 
                                        conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%, 
                                                        var(--card-background-color) 0% 100%);
                          }
                          .shape:after {

                            /* Add back icon shape */
                            content: "";
                            height: 100%;
                            width: 100%;
                            position: absolute;
                            border-radius: var(--icon-border-radius);
                            background: var(--shape-color);
                          }
                          ha-icon {

                            /* Icon charging animation */
                            {{ '--icon-animation: charge 3s linear infinite;' if is_state('binary_sensor.robert_phone_is_charging', 'on') }}
                          }
                          @keyframes charge {
                            0%, 80% { clip-path: inset(0 0 0 0); }
                            10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
                            20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
                            30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
                            40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
                            50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
                            60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
                            70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
                          }
                        .: |
                          ha-card {

                            /* Remove default card styling */
                            --ha-card-background: none;
                            --ha-card-box-shadow: none;
                            --ha-card-border-width: 0;

                            /* Center card on row */
                            width: fit-content;
                            margin: auto;

                            /* Make card non-responsive to select and pointer */
                            user-select: none;
                            pointer-events: none;
                          }
                  - type: conditional
                    conditions:
                      - entity: sensor.robert_phone_wifi_connection
                        state_not: <not connected>
                    card:
                      type: custom:mushroom-template-card
                      primary: '{{ states(''sensor.robert_phone_wifi_connection'') }}'
                      secondary: >-
                        {% set signal_level = states(entity) | int %} {% if
                        signal_level != -1 %} 
                          {{ signal_level }} dBm
                        {% endif %}
                      icon: >-
                        {% set signal_level = states(entity) | int | abs %} {%
                        if signal_level > 90 %} 
                          mdi:wifi-strength-outline
                        {% elif signal_level > 80 %} 
                          mdi:wifi-strength-1
                        {% elif signal_level > 70 %}
                          mdi:wifi-strength-2
                        {% elif signal_level > 60 %}
                          mdi:wifi-strength-3
                        {% elif signal_level > 1 %}
                          mdi:wifi-strength-4
                        {% else %}
                          mdi:wifi-strength-off
                        {% endif %}
                      entity: sensor.robert_phone_wifi_signal_strength
                      layout: vertical
                      fill_container: false
                      icon_color: cyan
                      tap_action:
                        action: none
                      hold_action:
                        action: none
                      double_tap_action:
                        action: none
                      card_mod:
                        style: |
                          ha-card {

                            /* Remove default card styling */
                            --ha-card-background: none;
                            --ha-card-box-shadow: none;
                            --ha-card-border-width: 0;

                            /* Center card on row */
                            width: fit-content;
                            margin: auto;

                            /* Make card non-responsive to select and pointer */
                            user-select: none;
                            pointer-events: none;
                          }
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    tap_action:
                      action: none;
                    hold_action:
                      action: call-service
                      service: notify.mobile_app_sm_s916b_robert
                      data:
                        message: Ringing phone...
                        title: Find Phone
                        data:
                          ttl: 0
                          importance: high
                          priority: high
                          tag: Find
                          channel: alarm_stream
                    icon: mdi:target
                    icon_color: red
                    content: Find Phone
                alignment: center
                card_mod:
                  style: |
                    ha-card {

                      /* Style Chip like Mushroom button */
                      --chip-background: rgba(var(--rgb-red), 0.2);
                      --chip-border-radius: var(--mush-control-border-radius, 12px);
                      --chip-height: var(--mush-control-height, 42px);
                      --chip-box-shadow: none;
                      user-select: none;
                    }
                    ha-card:active {

                      /* Add effect to give feedback on button press */
                      --chip-background: rgba(var(--rgb-red), 0.4);
                    }
              - type: map
                entities:
                  - entity: person.robert
                dark_mode: false
                hours_to_show: 24
                aspect_ratio: '4:3'
                card_mod:
                  style:
                    ha-map $ ha-entity-marker $: |
                      .marker {

                        /* Style person marker & adjust position to avoid blocking waypoints */
                        border: 3px solid var(--state-person) !important;
                        border-radius: 50% 50% 50% 0px !important;
                        transform: rotate(-45deg) translate(50%, -50%);
                        overflow: visible !important;
                        background: var(--state-person) !important;
                      }
                      .entity-picture {

                        /* Correct orientation of person avatar */
                        transform: rotate(45deg);
                        border-radius: 50%;
                      }
                    ha-map $: |
                      path:first-child { 

                        /* Style accuracy radius */
                        stroke: var(--state-person);
                        fill: color-mix(in srgb, var(--state-person) 50%, transparent);
                        stroke-width: 0px;
                      }
                      path:nth-child(even) {

                        /* Styling for waypoints */
                        stroke: var(--purple-color);
                        stroke-width: 4px;
                      }
                      path:nth-child(odd):not(:first-child) { 

                        /* Styling for lines */
                        stroke: var(--purple-color);
                        stroke-width: 4px;
                      }

                      .leaflet-control-attribution {

                        /* Style attribution text */
                        background: rgba(var(--rgb-card-background-color), 0.4) !important;
                        font-size: 10px;
                      }
                      .leaflet-container a {

                        /* Set color of zoom icons & attribution text */
                        color: var(--secondary-text-color);
                      }

                      .leaflet-control-zoom-in,
                      .leaflet-control-zoom-out {

                        /* Style zoom buttons like Chips */
                        border-radius: var(--mush-chip-border-radius, 19px) !important;
                        padding: 3px;
                        background: rgb(var(--rgb-secondary-text-color), 0.2) !important;
                        margin: 8px 12px 0px;
                        border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
                      } 
                      .leaflet-top {

                        /* Move zoom buttons to bottom of map */
                        bottom: 0px !important;
                      }
                      .leaflet-control-zoom {

                        /* Allow buttons to be moved */
                        position: absolute !important;

                        /* Adjust spacing for border */
                        bottom: calc(2 * var(--ha-card-border-width, 1px) + 56px);
                        
                        /* Remove extra margin */
                        margin: 0px !important;

                        /* Remove zoom control border */
                        border: none !important;
                      }
                      .leaflet-container:after {

                        /* Fade out map at top */
                        content: "";
                        position: absolute;
                        height: 100%;
                        width: 100%;
                        background: linear-gradient(to top, transparent 65%, var(--card-background-color));
                      }
                    ha-icon-button $ mwc-icon-button $: |
                      button {

                        /* Size center button to match Chip */
                        height: var(--mush-chip-height, 36px) !important;
                        width: var(--mush-chip-height, 36px) !important;
                        --mdc-icon-size: 22px;
                      }
                    .: |
                      ha-card {

                        /* Remove default card styling without affecting child elements */
                        box-shadow: none;
                        border-width: 0;
                        border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
                        
                        transition: all 0s;
                      }
                      :host {

                        /* Define Person State colors. Can be added to theme */
                        --state-person-home: var(--green-color);
                        --state-person-not-home: var(--red-color);
                        --state-person-zone: var(--blue-color);
                        --state-person-unknown: var(--grey-color);

                        /* Set person state color */
                        --state-person:
                        {% if is_state(config.entities[0].entity, ['home', 'not_home', 'unknown']) %}
                          var(--state-person-{{ states(config.entities[0].entity) | replace('_', '-') }})
                        {% else %}
                          var(--state-person-zone)
                        {% endif %};
                      }
                      ha-icon-button {

                        /* Position center button */
                        bottom: 12px;
                        left: 12px !important;
                        top: auto !important;

                        /* Style center button to match Chip */
                        color: var(--deep-orange-color) !important;
                        background: color-mix(in srgb, var(--deep-orange-color) 20%, transparent);
                        border-radius: var(--mush-chip-border-radius, 19px);
                        border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
                      }
          card_mod:
            style: |
              :host {

                /* Remove border from popup */
                --popup-padding-x: 0px;
                --popup-padding-y: 0px;
                --popup-min-width: 450px;
              }
              .content {

                /* Remove extra bottom border */
                margin: -18px -24px -24px !important;
              }
    card_mod:
      style: |

        /* Color border around avatar to show person status */
        ha-card {
          --chip-background:
          {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
            rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
          {% else %}
            rgb(var(--rgb-state-person-zone))
          {% endif %};
        } 

        /* Slightly enlarge & bring to front on hover */
        ha-card:hover {
          transform: scale(1.2);
          transform-origin: top center;
          z-index: 1;
          transition: all 1s;
        }

1 Like

Ill take a look when i get home from work later today. But my first thought is that it is likely caused by the fact that popups are a bit bugged in browser mod at the moment.

1 Like

Thank you!

I didn’t make much changes to the original code so that would certainly make sense.
But I do not think that would explain the larger size of the avatar in the top.