Frontend: Right clicking on entity button in firefox can result in button getting smaller

[Lopton]

Home Assistant release with the issue:
0.84.6

Last working Home Assistant release (if known):
N/A

Browser and Operating System:
Windows 10 Firefox 64.0 (64-bit)

Description of problem:
I have 1 vertical stack, with 3 horizontal stacks, with 3 entity-buttons each. In Firefox, if I right click on the entity buttons the icons and buttons change size and get smaller depending on the length of the label. Picture here

Javascript errors shown in the web inspector (if applicable):
N/A

Additional information:

        - cards:
          - cards:
              - entity: light.dining_room_overhead
                type: entity-button
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - entity: light.front_entry_overhead
                type: entity-button
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - entity: light.garage_lights
                type: entity-button
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
            type: horizontal-stack
          - cards:
              - entity: light.guest_bedroom_main_lights
                type: entity-button
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - entity: light.gym_main_lights
                type: entity-button
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - entity: light.kitchen_main_lights
                type: entity-button
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
            type: horizontal-stack
          - cards:
              - entity: light.master_bathroom_main_lights
                type: entity-button
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - entity: light.master_bedroom_main_lights
                type: entity-button
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - entity: light.office_main_lights
                type: entity-button
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
            type: horizontal-stack
        type: vertical-stack

[nicop4]

Hello
Same behaviour here. I use Firefox on MacOS Mojave.
The icon size also change if the state of the entity associated to the button changes in the background while the page is displayed.

views:
  - title: Main
    id: test
    cards:
      - type: vertical-stack
        cards: 
          - type: thermostat
            entity: climate.family_room
          - type: custom:button-card
            entity: sensor.family_room_thermostat_hvac_state
            icon: mdi:radiator-off
            size: 10%
            state:
              - value: 'heating'
                icon: mdi:radiator
                color: rgb(255, 129, 0)

I use Home Assistant release 0.85.1, but the problem was present before. I don't know since when though.
It works fine on Safari or Chrome.

I will try to investigate on my side.

[iantrich]

@nicop4 we don't offer support for custom cards

[iantrich]

@Lopton I agree that this is strange behavior but why are you right clicking on the buttons?

[nicop4]

@iantrich Well, personally I don't right click on purpose on the buttons :) but I noticed the behaviour that @Lopton described was the same as when the entity state changes in the background (and it's more annoying for me).
As the source cause could be related, I give another example if it can help.

Agreed for the custom card support I will ask on their repo.

[iantrich]

@nicop4 unfortunately I think the dev for button-card has abandoned the project

[nicop4]

@iantrich I pushed a PR to him for an open issue a few days ago, a new release should be released soon so it seems still active :)

I could "fix" my issue by setting a size in pixel to my icon instead of a percentage (it was set to 40% by default). My icon is now fixed. It seems something was reapplying the percentage on the size at each refresh, I don't know why.
If it can help troubleshoot this issue...

[iantrich]

@nicop4 nice

[Lopton]

@iantrich in a project intended for the public users asking why they would do something as simple as right clicking seems off to me.

However the truth is that the buttons change size on their own even without right clicking, the right clicking was a sure fire way for me to demonstrate the problem, because it has 100% success. But even without the right click the result is the Home Assistant view with the enitty-buttons looks like a 4 year old made it.

Personally I gave up on the entity button and have moved to the custom kuuji/button-card by because of the multiple of problems with the built-in entity-button

[iantrich]

@Lopton I was genuinely curious, not saying it is acceptable. Thanks for your constructive feedback

[tomlut]

It happens with left clicks too. See my duplicate https://github.com/home-assistant/home-assistant-polymer/issues/2614

[Bishma]

I think this may be getting worse over time. I opened HA in Firefox for the first time since December and noted that the issue was still present (left or right click for me). Back then the buttons would reset on refresh, now they do not.

[SaturnusDJ]

Similar behaviour here.

[dannyqwertz]

Same behaviour over here (with deprecated custom:button-card AND with 'new' lovelace entity-button-card)

I think it maybe has something to do with css-selector "keyboard-focus" (I think this class gets assigned to paper-button when focus is on this button)

Happens 100% when right clicking (if the right-click goes through) and when tabbing between elements.
Sometimes happens when only left-clicking, too (couldn't replicate any pattern yet, but again, 'keyboard-focus' related)

As soon as the element gets assigned to class 'keyboard-focus' it changes size / jumps / views the text in bold.

[iantrich]

I've been able to confirm this bug on 0.87.1, but it looks like the conversion to using mwc-button has resolved it in dev. 🎉 @balloob
fixed by https://github.com/home-assistant/home-assistant-polymer/pull/2744

Should be in the next beta https://github.com/home-assistant/home-assistant-polymer/pull/2747