Picture element botton-card format destroyed after update to HA-Core 2024.4.x

[budofighter]

Checklist

• [x] I updated the card to the latest version available
• [x] I cleared the cache of my browser

Describe the bug A clear and concise description of what the bug is.

Version of the card Version: 4.1.2

To Reproduce This is the configuration I used:

type: picture-elements
image: /local/backgrounds/Erdgeschoss6.png
elements:
  - type: custom:button-card
    icon: mdi:lightbulb
    entity: light.flur_eg
    aspect_ratio: 1
    size: 70%
    name: Flur
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    style:
      top: 60%
      left: 70%
      width: 5vw
      height: 5vw
    show_icon: true
    show_name: false
    show_state: false

Screenshots HA-Core version 2024.3.3:

HA-Core version 2024.3.x

Expected behavior After Update, the shape and color should be the same, as before the update.

Desktop (please complete the following information):

• Browser [Edge]

• Version [123.0.2420.97]

  • Browser [Chrome]

• Version [123.0.6312.123]

  • Browser [Firefox]
• Version [124.0.2]

Smartphone (please complete the following information):

• Device: [iPhone14]
• OS: [e.g. iOS17.4.1]
• Browser [HA-Application]

Additional context The problem occurred after updating HA Core on 2024.4.0. Also in Version 2024.4.1-3 is the same problem. If I change the site layout from panel (1 card) to grid view (standard), the problem is solved. If I go back to panel view, the problem appears again. Removing additional style information, come to the same result:

type: picture-elements
elements:
  - type: custom:button-card
    entity: light.flur_eg
    name: Flur
    style:
      top: 60%
      left: 70%
image: https://demo.home-assistant.io/stub_config/floorplan.png

Edit: If you use styles with 10% boarder-radius, it's a workaround for the same effect:

    styles: 
      card:
        - border-radius: 10%

[danrichardson]

I have the same issue, and was just coming to post it:

I've installed Button-Card to use for my custom UI. All works well, but something is driving me nuts - all the buttons in a Button-card are rectangular, and I can't figure out why.

I have re-installed HA in a new VM, and only have button-card as my only HACS plugin (IE: it's CLEAN)

I create a new dashboard. I make it a Panel. I add a card: Button-card.

The card consists of just this:

type: custom:button-card
show-state: false
tap_action:
  action: null
custom_fields:
  weather_forecast:
    card:
      type: button
      entity: sensor.sun_next_noon
styles:
  card:
    - padding: 10px
    - border-radius: 100px
    - align-self: start
    - width: 1112px
    - height: 814px
    - opacity: 1
    - background-color: green
  custom_fields:
    weather_forecast:
      - position: absolute
      - top: 50px
      - left: 50px
      - width: 400px
      - height: 200px

The result in the preview is a button with rounded corners. In the panel itself, it's rectangular. 🤔

I've tried adding styling with radius, but nothing seems to help. Am I missing something, or is this a bug?

[RomRider]

That's related to a change in HA Core: https://github.com/home-assistant/frontend/pull/20122 when in panel mode.

A possible fix is using card-mod, see this comment: https://github.com/thomasloven/lovelace-layout-card/issues/284#issuecomment-2048424148