Problem mit yaml Code für eine Bildelementekarte

[stemo]

Hallo und guten Abend,

ich hoffe ihr könnt mir bei einem yaml Problem helfen. Ich habe für meine PV Anlage ein Energie-Dashboard erstellt. Um die Energieflüsse zu visualisieren enthält es verschiedene horizontale und vertikale Linien. Bei den vertikalen Linien habe ich jetzt das Problem, das ich die Länge der Linie nicht ändern kann. Unten der Code einer vertikalen Linie. Eigentlich sollte mit dem height: 35% Befehl in der letzten Zeile die Länge eingestellt werden können, aber die Linie verrutscht damit nur etwas, wird aber nicht länger. Könnt ihr mit hier weiterhelfen?

  - type: custom:button-card
    entity: sensor.powerocean_hj37zdh5zg7a0143_housepower
    show_name: false
    show_icon: false
    show_state: false
    custom_fields:
      line: ' '
    styles:
      card:
        - background: rgba(0,0,0,0)
        - box-shadow: none
        - border: none
        - width: 8px
        - padding: 0px
      custom_fields:
        line:
          - width: 8px
          - height: 100%
          - background: |
              [[[
                let val = Number(entity.state);
                if (val > 0) return 'repeating-linear-gradient(0deg, #F44336 0px, #F44336 8px, transparent 8px, transparent 16px)';
                return '#FFD700';
              ]]]
          - background-size: 100% 32px
          - animation: |
              [[[
                let val = Number(entity.state);
                if (val > 0) return 'flow-down 0.8s linear infinite';
                return 'none';
              ]]]
    extra_styles: >
      @keyframes flow-down { 0% { background-position: 0 0; } 100% {
      background-position: 0 32px; } }
    style:
      top: 40%
      left: 48%
      height: 35%