Icons/positions not alligned correctly after updste to v4

[Phoenix-DH]

Checklist

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

Describe the bug Circle arround lights has moved down and is not alligned correctly anymore.

Version of the card Version: 4.0.1

To Reproduce This is the configuration I used:

#################################################
#                                               #
#                  MAIN CSS                     #
#                                               #
#################################################

icon_main:
  styles:
    icon:
      - display: flex
  extra_styles: |
    .ha-card.button-card-main{
      padding: 0 !important;
    }
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) {
      /* Retina-specific screens */
      .ha-card.button-card-main{
          padding: 0 !important;
      }
    }
#################################################
#                                               #
#                    CIRCLE                     #
#                                               #
#################################################

circle:
  custom_fields:
    circle: >
      [[[
        if (entity.state === 'on') {
          const input = variables.circle_input;
          const radius = 15;
          const circumference = radius * 2 * Math.PI;
          return `
            <svg width="100%" viewBox="0 0 50 50">
              <style>
                circle {
                  transform: rotate(-90deg);
                  transform-origin: 37.5% 50%;
                  stroke-dasharray: ${circumference};
                  stroke-dashoffset: ${circumference - input / 100 * circumference};
                }
                tspan {
                  font-size: 10px;
                }
              </style>
              <circle cx="25" cy="25" r="${radius}" stroke="${variables.circle_color}" stroke-width="2" fill="none" />
            </svg>
          `;
        }
      ]]]
  styles:
    custom_fields:
      circle:
        - top: 0%
        - left: 0%
        - width: 4vw
        - position: absolute
        - letter-spacing: 0.03vw

#################################################
#                                               #
#                LIGHT                          #
#                                               #
#################################################
light:
  template:
    - icon_main
    - circle
  show_state: false
  show_icon: true
  show_name: false
  show_label: false
  size: 40%
  color: auto
  color_type: icon
  tap_action:
    action: toggle
    haptic: light
  styles:
    card:
      - width: 3vw
      - height: 3vw
      - borderRadius: 10vw
      - background-color: rgba(115, 115, 115, 0.3)
  variables:
    circle_input: >
      [[[ return Math.round(entity.attributes.brightness / 2.54); ]]]
    circle_color: var(--button-card-light-color)
  hold_action:
    action: fire-dom-event
    browser_mod:
      service: browser_mod.popup
      data:    
        title: >
          [[[ return entity.attributes.friendly_name; ]]]
        content:
          type: light
          entity: >
            [[[ return entity.entity_id ]]]

------

  ######################
  ###       Theke    ###
  ######################
  - entity: light.beleuchtung_theke
    type: custom:button-card
    style:
      left: 56%
      top: 42%
    template:
      - light

Screenshots

Expected behavior As bwfore, clear rounded.

Desktop (please complete the following information):

• Browser [e.g. chrome, safari] ALL
• Version [e.g. 22] ALL

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] ALL
• OS: [e.g. iOS8.1] ALL
• Browser [e.g. stock browser, safari] ALL
• Version [e.g. 22] ALL

[RomRider]

What do you want me to do without the configuration of at least one button?

[Phoenix-DH]

@RomRider Sorry, you have been to quick :) I created the bug at my phone and just added the code.

Thanks for having a look.

[RomRider]

Mind checking with the latest beta, please? I think it was the same issue as the lock problem.

[Phoenix-DH]

Just did with 4.1.0-DEV3 ... No issues as far as I can see ... hopefully brwoser cache cleaning everything worked as expected. Thanks.

[RomRider]

Great, I'll close it then. Thanks for the confirmation