v.4.0.1 Icon Size not rendered correctly

[dafunkydan]

Checklist

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

Describe the bug
Icon Size 100% is no longer 100% with Version 4.x

In this particular Case, drawn Icon Size doesn't change between 20-100%.
Icon gets smaller when going lower that 20%, but not bigger.
Same behavior goes for using 'px'. Icon doesn't get bigger as in Screenshot below, though there is Space available.

Version of the card
4.0.1

To Reproduce
This is the configuration I used:

type: custom:button-card
show_name: true
show_state: true
size: 100%
entity: sensor.weather_home_temperatureactservice
name: |
  [[[ return states['sensor.aqara_temperatur_inside_mean'].state + " °C"]]] 
styles:
  card:
    - height: 100%
    - font-size: 14px
    - padding-bottom: 2%
    - padding-top: 5%
  state:
    - color: >-
        [[[ if ( (states['sensor.weather_home_temperatureactservice'].state) -
        (states['sensor.aqara_temperatur_inside_mean'].state) > 0 ) return
        'rgb(153,0,26)'; else return 'gray' ]]]
    - font-size: 12px
icon: mdi:white-balance-sunny
color_type: icon
color: rgb(68,115,158)
tap_action:
  action: navigate
  navigation_path: /user-home/weather/

Screenshots

Expected behavior
When Size: 100%, Icon should fill the whole available Size.

Desktop (please complete the following information):

• Firefox 115.0
• Chrome 115.0

Smartphone (please complete the following information):

• Device: Google Pixel 6a
• OS: Android 13
• Browser: Compainion App
• Version: 2023.7.5-full

[mlohus93]

Me too! With the update to v4.0.1 my icons all shrunk dramatically (as you showed). I am using the latest version of HA companion app for iOS which is 2023.4 on iPhone 12 Pro running iOS 16.5.1(c). I would add that one of my buttons oddly changed from Green to sky blue whereas the only colors called for depending on state are rgb(255, 0, 0) and rgb(200, 200, 0) and rgb(0, 100, 0). Same issues and appearance on my MacBook Pro using Chrome 115.0.5790.114. Also same on Home Assistant app v2023.4 for MacOS running on MacBook Pro with MacOS Monterey 12.6.7.

[mlohus93]

I will add:

1. all the cases where I have red buttons the lettering has changed to black (was white)
2. the red bar at the top of the screenshot I have attached has the exact same card style settings as the two green bars at the bottom except for a width: 180px is in place for the green bars. However the wording in the red bar is vertically centered and the wording is falling off the bottom of the green bars.

[dafunkydan]

This Issue is labeled "Icon Size not rendered correctly".
You might want to find the correct Issue for your non-related Observations, or open another Bug Report if not already existant.

Anyway, good to know that the Bug regarding Icon Size exists on Mac as well!

[Mariusthvdb]

tbh, I am not seeing this anywhere at all...
so it might exists in your system, I can not reproduce at all.

could you please try a minimal card config to show the issue and share that?

[Symon84]

Checklist

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

Describe the bug Icon Size 100% is no longer 100% with Version 4.x

In this particular Case, drawn Icon Size doesn't change between 20-100%. Icon gets smaller when going lower that 20%, but not bigger. Same behavior goes for using 'px'. Icon doesn't get bigger as in Screenshot below, though there is Space available.

Version of the card 4.0.1

To Reproduce This is the configuration I used:

type: custom:button-card
show_name: true
show_state: true
size: 100%
entity: sensor.weather_home_temperatureactservice
name: |
  [[[ return states['sensor.aqara_temperatur_inside_mean'].state + " °C"]]] 
styles:
  card:
    - height: 100%
    - font-size: 14px
    - padding-bottom: 2%
    - padding-top: 5%
  state:
    - color: >-
        [[[ if ( (states['sensor.weather_home_temperatureactservice'].state) -
        (states['sensor.aqara_temperatur_inside_mean'].state) > 0 ) return
        'rgb(153,0,26)'; else return 'gray' ]]]
    - font-size: 12px
icon: mdi:white-balance-sunny
color_type: icon
color: rgb(68,115,158)
tap_action:
  action: navigate
  navigation_path: /user-home/weather/

Screenshots

Expected behavior When Size: 100%, Icon should fill the whole available Size.

Desktop (please complete the following information):

• Firefox 115.0
• Chrome 115.0

Smartphone (please complete the following information):

• Device: Google Pixel 6a
• OS: Android 13
• Browser: Compainion App
• Version: 2023.7.5-full

I have the same problem after update to v4.0.1.
IOS 16.4.1 (a) with Home Assistant Companion 2023.4, but also on MacOS Catalina with Google Chrome Browser...

[dafunkydan]

could you please try a minimal card config to show the issue and share that?

Sure! Thanks for your assistance! Edit: Simplified Code
This would be a more minimal Setup:

type: custom:button-card
show_state: true
size: 100%
entity: sun.sun
name: Sun is
styles:
  card:
    - height: 100px
    - font-size: 10px
icon: mdi:white-balance-sunny

To me it looks like it is only occuring when set:

styles:
  card:
    - height: 100px

In my particular Case, the Button-Cards usually sit in a layout-card with three Cards in a Row, and the Height in each Card is set to 100%. (this might make the impact of the change more visible).
100% Height on a single Card all alone doesn't make too much sense, this is why i went for 100px to demonstrate it.
But it should be good enough to test reproduction (sorry, you would need to replace the Entity with one thats on your System, saw it too late...).

Let me know if you can reproduce it!

[mlohus93]

not sure how minimal you are looking for, but here is one that is pretty basic. Attached screenshot is yesterday pre-4.0.1 (left) and today post-4.0.1 (right). I updated to 4.0.1 late yesterday evening just before bedtime; this morning I noticed the change. The icon is much smaller.

  - type: horizontal-stack
    title: Light Presets
    cards:
      - type: custom:button-card
        icon: mdi:lightbulb-off
        color: gray
        color_type: icon
        tap_action:
          action: call-service
          service: script.goodnight
        hold_action:
          action: none
        name: Goodnight
        styles:
          card:
            - font-size: 12px
            - font-weight: bold
            - height: 50px

[Mariusthvdb]

I confess I only use

- height:

in a card in a 'chip' template, and nowhere else but on icons or entity_picture (which are actual elements you need to set the size for)

I would Not see the use setting the card height in pixels in my own config tbh, where card size is determined by the container cards like grid or horizontal-stack (and an aspect_ratio where applicable). Have it auto resize according to those cards an it all automatic

But, most importantly, an in all honesty, isn't it to be expected that when you set the card height to a fixed pixel height, it auto adjusts the icon size to that? No need to test the icon getting smaller if you set the height to 50px...

And if you do, just take out other elements, to make the icon bigger, seems the only way, show less and the leftovers have more space.

what I didn't find remarkable is using:

name: Custom card
styles:
  card:
    - height: 100%

shows no icon at all, and the card is way smaller than without the 100% ;-) odd indeed

[dafunkydan]

True. I have almost nothing set to fixed px, because of what you said 😉
I have a grid with rem Height, within the cards with relative height, within the icons with 100%.
I just used a fixed px to narrow the Bug down and demonstrate the Error with the Icon Size 😀

The Point is - with 4.0.1 the icons can't get as big as they need to. I wouldn't mind if I could just set the (relative) Icon size to 150%, if that would solve the issue. But I haven't found a way.

Could you reproduce the behavior? Any idea how i could make the Icons look like they did on 3.5?

[RomRider]

I'll have a look at that today. There's several small CSS issues it seems.

[dafunkydan]

Sorry for OT, but this is important: Thank you Guys so much for this awesome Card, and continuing Support! Homeassistant wouldn't be as good as it is without such a flexible Card 👍 👍 👍

[RomRider]

Ok, I found it... it's not a bug, it's actually how HA would do it haha. But some CSS has changed, that's true.

  #container.vertical div#img-cell + div,
  #container.name_state div#img-cell + div {
    margin-top: 8px;
  }

Should I revert that ? I think it's created a whole lot of problems...

For the code in the first post of the issue, @dafunkydan, can you try to fix it manually with:

styles:
  name:
    - margin-top: unset

Let me know if it gets back to what you expect?

[dafunkydan]

Yes, that does the Trick! 👍😎
Sure everyone affected would be happy if it could be fixed via an Update rather than having to go through every Card.
But if that would create serious Problems on another Part, it should be fine to fix it like that.

My two Cents - this Card is about customizing as one likes, so a forced margin is not the most nice Thing 😉 Anyway, if mentioned in the Docs, that should be okay as well.

Thanks again for your awesome bunch of Code and Support, really appreciate it! 👍

[RomRider]

My two Cents - this Card is about customizing as one likes, so a forced margin is not the most nice Thing 😉 Anyway, if mentioned in the Docs, that should be okay as well.

I agree, I'll revert it :)

[github-actions]

🎉 This issue has been resolved in version 4.1.0-dev.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[RomRider]

1. all the cases where I have red buttons the lettering has changed to black (was white)

This is because I've changed the way the font color is computed when color_type: card is set. I'm using the contrast on top of the luminance. You can manually set the color if you need to, though.

[Symon84]

Ok, I found it... it's not a bug, it's actually how HA would do it haha. But some CSS has changed, that's true.

  #container.vertical div#img-cell + div,

  #container.name_state div#img-cell + div {

    margin-top: 8px;

  }

Should I revert that ? I think it's created a whole lot of problems...

For the code in the first post of the issue, @dafunkydan, can you try to fix it manually with:

styles:

  name:

    - margin-top: unset

Let me know if it gets back to what you expect?

Solved manually with this "tricks"! 🎉
Thank you very much for your assistance and for your work!

[Mariusthvdb]

heck, never seen any of these issues, the latest dev now introduces them in my config....
using a conditional top border coloring:

styles_border_top:
  styles:
    card:
      - border-top: >
          [[[ return entity.state === 'on'
              ? '0.5rem solid var(--icon-color-on)' : 'none'; ]]]

now compresses the button when on. I didnt see this before. And its quite impactful as it not only shrinks the icon, but it seems to compress the whole rest of the button..

On Desktop this would be something to live with probably, but on mobile where everything is tiny as it is (4 buttons in a grid 1/1) the effect is all the more visible.

not sure what to do, add the unset to the top element in my button? and if yes, which is that, the icon, or the notification.
Need to experiment, (initial tests dont work...) but really feel this should not be happening in the first place

I also tried to use inset in that border-top style, but that makes no spacial difference, and it interferes with the solid/color, only showing a black border.

[RomRider]

Not sure what you are talking about @Mariusthvdb? Maybe pictures will help?

[Mariusthvdb]

sorry...
please see how the icon position drops (this being Desktop, the rest of the button is ok.On mobile its gets compressed more , and the icon shrinks more)

or 2 almost identical buttons for comparison:

Seems that is not necessary at all, and there is plenty if room above the icon in the 'on' state not to have to shrink or drop.

[RomRider]

Try to play with box-sizing but this is unrelated to that issue and is just pure CSS

[Mariusthvdb]

ok thanks, I will, but I am almost 100% certain I didnt see this before..

[dafunkydan]

ok thanks, I will, but I am almost 100% certain I didnt see this before..

Well, just change the Version back (HACS -> Integrations -> Button-Card -> (ThreeDots) ReDownload -> 3.5) and see what happens. This is how i made sure :-)

[github-actions]

🎉 This issue has been resolved in version 4.1.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀