Trying to tweak paper-buttons-row to emulate rgb-light-card but play nice with fold-entity-row

Tags: #<Tag:0x00007f73ae255160>

Howdy!

I’ve been trying to tweak paper-buttons-row to emulate rgb-light-card. The reason for this being that I wanted to add mdi icons to the buttons, but (for now) the developer has decided not to add that feature. I’ve had pretty good results. The top card uses rgb-light-card and the bottom uses paper-buttons-row:

Looks pretty decent, right? The problem I’m running into is that I’m also using fold-entity-row to show/hide the lights below the big buttons. The top card will show/hide the entities only when you click the caret on the right-hand side. The bottom card, however, will toggle if you click any of the buttons or empty space around them (anywhere in whole div, essentially). Anytime you want to click one of the buttons, you end up showing/hiding the entities below unintentionally, which is annoying. Here’s the code for both cards:

rgb-light-card

entities:
  - entities:
      - entity: light.master_bedroom
        icon: 'mdi:bed-king'
      - entity: light.hue_color_1
      - entity: light.hue_color_2
    head:
      colors:
        - entity_id: light.master_bedroom
          icon_color: white
        - icon_color: 'rgba(255, 206, 120,1)'
          service: scene.turn_on
          service_data:
            entity_id: scene.master_bedroom_default
          type: call-service
        - icon_color: 'rgba(170, 136, 80,1)'
          service: scene.turn_on
          service_data:
            entity_id: scene.master_bedroom_default_10
          type: call-service
      justify: center
      type: 'custom:rgb-light-card'
    type: 'custom:fold-entity-row'
    padding: null
state_color: true
style: |
  div.card-header {justify-content: center}
title: Master Bedroom
type: entities

paper-buttons-row

entities:
  - entities:
      - entity: light.master_bedroom
        icon: 'mdi:bed-king'
      - entity: light.hue_color_1
      - entity: light.hue_color_2
    head:
      type: 'custom:paper-buttons-row'
      style: >
        div.flex-box { justify-content: center; flex-wrap: wrap; cursor: auto;
        } 

        ha-icon { color: white; }

        paper-button:hover { box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px
        10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); }

        paper-button {
          border-radius: 50%;
          border-width: 3px;
          border-color: black;
          border-style: solid;
          margin: 4px 8px;
          width: 20px;
          height: 20px;
          transition: box-shadow .15s;
          box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
          --mdc-icon-size: 100%
        }
      base_config:
        name: false
        icon: false
      buttons:
        - entity: light.master_bedroom
          icon: 'mdi:power'
          state_styles:
            'on':
              icon:
                color: black
              button:
                background: white
            'off':
              icon:
                color: white
              button:
                background: black
        - entity: scene.master_bedroom_default
          style:
            button:
              background: 'rgba(255, 206, 120,1)'
        - entity: scene.master_bedroom_default_10
          style:
            button:
              background: 'rgba(170, 136, 80,1)'
    type: 'custom:fold-entity-row'
    padding: null
style: |
  div.card-header {justify-content: center}
title: Master Bedroom
type: entities

I can’t figure out for the life of me how to fix this. Anyone have any ideas? I also have card-mod installed if the configuration can’t be done inside paper-buttons-row. Thanks in advance for the help!

Ok, so it works as expected when I use the HA Android app, or even just mobile Chrome. I’m not sure what’s going on with desktop Chrome (haven’t tried other browsers yet) that makes this not work correctly.

Desktop Firefox doesn’t work correctly either.