Entities Card Buttons Row: Buttons no longer centered in card row or automatically resized to fill card row

[krazos]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

After updating to core-2021.12.0b0, the buttons in a multiple-buttons row in an entities card are no longer automatically resized based on the number of buttons, and are left-aligned rather than centered horizontally within the row (see screenshot below).

Describe the behavior you expected

Prior to core-2021.12.0b0, the buttons automatically resized based on the number of buttons, and were centered horizontally within the row.

Steps to reproduce the issue

...

What version of Home Assistant Core has the issue?

core-2021.12.0b0

What was the last working version of Home Assistant Core?

core-2021.11.5

In which browser are you experiencing the issue with?

Google Chrome 97.0.4692.36; Home Assistant iOS Companion App 2021.11.1

Which operating system are you using to run this browser?

Various

State of relevant entities

No response

Problem-relevant frontend configuration

type: entities
entities:
  - type: buttons
    entities:
      - entity: script.good_morning
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.good_morning
      - entity: script.good_night
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.good_night
      - entity: script.goodbye
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.goodbye
      - entity: script.i_m_back
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.i_m_back
      - entity: script.nursery_gentle_wake_up
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.nursery_gentle_wake_up
      - entity: script.nursery_lullaby_radio
        tap_action:
          action: call-service
          service: script.turn_on
          service_data:
            entity_id: script.nursery_lullaby_radio

Javascript errors shown in your browser console/inspector

No response

Additional information

[krazos]

For reference, this is basically how the buttons in the buttons row appeared prior to 2021.12.0b0:

I recreated the desired appearance for now via custom:paper-buttons-row, but I believe the default alignment and spacing for the stock buttons row should be more or less as they appear here, rather than squished together at the left side of the card in the screenshot under "Additional Information" above.

[amigan]

I also really dislike this change. I believe it was caused by #10770.

Chips just seem like the wrong element. From Material Design guidelines:

Chips allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.

[Kertz1954]

An attractive shop window display says it all. The same should be said about an HA dashboard, but unfortunately not in this case.

Not only are the alignments wrong, but also images are not shown at all.

The Entities card documentation does not mention anything about CHIPS, with ketchup or mayonnaise !!

UPDATED

[jlpouffier]

Same issue on my side. Documented here #10892

[mneuron]

I think for the footer the new chip style (left aligned) is fine , see #10770 . But for a button-entity row the chip style is not nice looking. For now I partially 'fixed' it with:

card_mod:
  style:
    hui-buttons-base$: |
      .ha-scrollbar {
        justify-content: space-between !important;
        padding: 0px !important;
        }

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[amigan]

The latest version still has this issue.

[jempo]

also the new one 2022.6.4

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.