Add padding when large class is added

[Misiu]

Fixes #3711

[homeassistant]

Hi @Misiu,

It seems you haven't yet signed a CLA. Please do so here.

Once you do that we will be able to review and accept this pull request.

Thanks!

[Misiu]

Test entry:

type: vertical-stack
cards:
  - cards:
      - type: thermostat
        entity: climate.upstairs
      - type: thermostat
        entity: climate.upstairs
    type: horizontal-stack
  - cards:
      - type: thermostat
        entity: climate.upstairs
      - type: thermostat
        entity: climate.upstairs
    type: horizontal-stack

Before:

After:

[bramkragten]

This also means the modes will be a lot closer to the current mode and the set temperature will drop down. In your specific use case this turns out better, but not in every situation.

Before:

After:

[Misiu]

@bramkragten I agree, I tested this only with my case. What entry did You use? Can You post it here?
I can give this a second look, but I need a week or two to finish my current project (HA related).
Maybe there should be 3 types of size? small, normal and large? this way by default I can align everything in normal state and add modifiers to small and large views.

[bramkragten]

We are working on replacing the round slider, let's wait for that and see if this is still a thing.
#3734

[Misiu]

@bramkragten sure :) In a future project I'm planning to use 16 thermostats so I want to squish 4 in a single card to save space.
Before I start anything I'd like to have the UI fixed for such a scenario. Then the only thing that will remain is how the generic thermostat works - home-assistant/core#20154, hopefully, it will be fixed till then 🙂