How to correctly set a height for history graph card?

Configuration Frontend
1

Dear community,

I try to set the max height for the history-graph card. To achieve that I decided to try card-mod the following way:

type: history-graph
entities:
  - entity: sensor.current_uv_index
hours_to_show: 48
card_mod:
  style: |
    ha-card {
      height: 10em;
      max-height: 10em;
    }

however the issue is that the chart itself does not become shorter, but instead creates an impression it is shorter and the following card starts to overlap it. I’ve tried to play with height and max-height CSS properties with !important modifier as well. What am I doing wrong? Thank you in advance.

graph-card

Complete YAML:

- type: vertical-stack
  cards:
    - type: history-graph
      entities:
        - entity: sensor.current_uv_index
      hours_to_show: 48
      card_mod:
        style: |
          ha-card {
            height: 10em !important;
            max-height: 10em !important;
          }
    - type: markdown
      content: >-
        Maximum exposure time for skin as to ...

I’ve checked the solution in this post and also tried grid-layout with the same unfortunate result.

2
  1. Suggest to ask similar questions in the huge cad-mod thread. All solutions will be in one place, not scattered in 100500 threads.
  2. Check this.