Compass size on small cards

[yuvalabou]

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:

Last working release (if known):

Browser and Operating System:

Description of problem:
Comapss size is excceeding the borders when placed inside horizontal stack.

Javascript errors shown in the web inspector (if applicable):

Additional information:

[tomvanswam]

The compass does not scale, this is by design.

Currently I don't know how to scale it, so I need to figure that out in order to make that work.
It's not easy to make the scaling work, as the texts inside the compass should scale too, otherwise it will look wrong as well.

As this is a known 'limitation' I'm changing the label to enhancement.

[tomvanswam]

Please note that only the compass + indicators scale. The texts do not.

[TB-SE]

I recommend temporarily using card-mod. Here's the base code:

card_mod:
  style: |
    ha-card {
      transform: scale(1.0,1.0) translate(0%,0%);
      aspect-ratio: 1 / 1;
    }
    div {
      transform: scale(1.0,1.0) translate(0%,0%);
    }

ha-card is of course for the outer part of the card and div is the inner part (basically the actual compass). The aspect ratio value helps to conform the card to other cards, for example when using grid cards. The translate value moves either the card or the compass within the card, so that it can be centered. And lastly, the scale value is shown for the X and Y axis. Not sure how well this works across different browsers and platforms, but there are compatible workarounds available online.