Service Button on Picture Elements Card does not correctly center text

ghost commented 1 year ago

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

When I create a Service Button on a Picture Elements Card and apply a background under the Styles section, the text/title of the Service Button will not correctly center on the background. It seems to be adding a small amount of additional space on the right-hand side.

Describe the behavior you expected

When using the text-align: center parameter under Styles, I would expect the text to perfectly center in the middle of the objects background.

Steps to reproduce the issue

Create an example picture elements card with the following yaml:

type: picture-elements elements:

type: service-button title: Turn lights off style: top: 50% left: 50% background-color: red text-align: center service: homeassistant.turn_off service_data: entity_id: group.all_lights image: https://demo.home-assistant.io/stub_config/floorplan.png

![service-button](https://github.com/home-assistant/frontend/assets/86042175/e0f35aaf-2a8f-4b85-aff9-7f18b106e628

You will notice extra pixels/space on the right-hand side. This example is only 1px wide, but this space seems to increase on the iOS mobile app to a noticeable amount.

Perhaps there is something wrong in the css style for the service-button that is causing additional white-space after the last character? I have also tried setting the background-position: center parameter which does not seem to help.

What version of Home Assistant Core has the issue?

core-2023.5.3

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

MS Edge 113.0.1774.42 (Official build) (64-bit) & iOS Mobile App

Which operating system are you using to run this browser?

Microsoft Windows 11

State of relevant entities

No response

Problem-relevant frontend configuration

type: picture-elements
elements:
  - type: service-button
    title: Turn lights off
    style:
      top: 50%
      left: 50%
      background-color: red
      text-align: center
    service: homeassistant.turn_off
    service_data:
      entity_id: group.all_lights
image: https://demo.home-assistant.io/stub_config/floorplan.png

Javascript errors shown in your browser console/inspector

No response

Additional information

service-button2

A second example.

yaml used:

    style:
      left: 50%
      top: 75%
      background-color: '#F2612C'
      border-radius: 16px
      text-align: center
      '--mdc-theme-primary': var(--primary-text-color)

ildar170975 commented 1 year ago

Confirmed Chrome + Win10

github-actions[bot] commented 1 year ago

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.

ildar170975 commented 1 year ago

up

github-actions[bot] commented 9 months ago

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.

ildar170975 commented 9 months ago

Seems that this happens due to letter-spacing attribute inside mdc-button - it creates a kind of "margin" after the last letter of a name. A possible solution is defining a negative margin-right to a "span" element containing a name - equal to that letter-spacing. May be fixed either on the "material-components-web" side - or on HA side (I hope).

Consider this example:

type: picture-elements
image: /local/images/test/white.jpg
elements:
  - type: service-button
    title: IIIIIIIII
    style:
      top: 48%
      left: 50%
      background-color: rgba(0,255,0,0.2)
    service: input_boolean.toggle
    service_data:
      entity_id: input_boolean.test_boolean
  - type: service-button
    title: IIIIIIIII
    style:
      top: 50%
      left: 50%
      background-color: rgba(0,255,0,0.2)
    service: input_boolean.toggle
    service_data:
      entity_id: input_boolean.test_boolean
    card_mod:
      style:
        ha-call-service-button:
          $:
            ha-progress-button:
              $:
                mwc-button:
                  $: |
                    button span.slot-container {
                      margin-right: calc(var(--mdc-typography-button-letter-spacing,.0892857143em) * -1);
                    }

which creates 2 buttons - default (upper) & fixed (lower):

Zoomed in:

The 2nd button has a properly aligned text.

Note: the var(--mdc-typography-button-letter-spacing,.0892857143em) value is taken from a letter-spacing value of mdc-button.

github-actions[bot] commented 6 months ago

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.

ildar170975 commented 6 months ago

up

github-actions[bot] commented 3 months ago

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.

ildar170975 commented 3 months ago

up

github-actions[bot] commented 2 weeks ago

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.

ildar170975 commented 2 weeks ago

Up

home-assistant / frontend