Align in the same way than standard row

[McGiverGim]

Hi! Thanks for your work!!

I have observed that the "standard" entity has different alignment than multiple-entity-row:

Can it be aligned in the same way to make easier merge both type of elements? Using the multiple-entity-row for all of the elements fixes the issue, but it wastes the space on the right and I think is better to be aligned with the base.

[benct]

This happens when the state content is too narrow, as the element has min-width: 45px. This is actually to fix alignment of additional entities on the row, but I guess there is room for improvement on that behaviour. I'll have a look at what can be done.

[mycanaletto]

+1

[michaelarnauts]

@mycanaletto

Use https://github.com/thomasloven/lovelace-card-mod and apply this style. You will need to experiment with the correct amount of pixels.

    style: |
      .entity {
        min-width: 35px;
      }

If you want to style individual columns, you can use the following. It seems nth-child(2) is the first "column".

    style: |
      .entity:nth-child(2) {
        min-width: 35px;
      }
      .entity:nth-child(3) {
        min-width: 45px;
      }
      .entity:nth-child(4) {
        min-width: 25px;
      }

[FredericMa]

Hi @michaelarnauts
I'm trying to accomplish the same thing but applying the style doesn't do anything. So probably I'm applying it at the wrong spot.
Do you have an example where to put the style in the card?