Button Card will nicht kleiner werden

Dashboard/Cards/Frontend
1

Guten Morgen,

ich finde einfach meinen Fehler nicht. Ich versuche die Höhe des unteren Streifens (Füllstrand kritisch hoch…) seit geraumer Zeit zu verringern auf einen schmalen Streifen. Egal was ich in height: eintrage, es ändert sich einfach nichts. So sieht es aktuell aus:

image
image1766×498 57.3 KB

Hier der Code er Karte mit den beiden darüber liegenden Fluid Gauge Anzeigen.

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:fluid-level-background-card
        level_color:
          - 0
          - 0
          - 139
        background_color:
          - 0
          - 40
          - 45
        card:
          type: gauge
          entity: sensor.tank_2000l_fullstand_in_liter
          name: Tank 2000L
          min: 0
          max: 2000
          needle: true
          severity:
            green: 150
            yellow: 900
            red: 1500
        full_value: "2000"
        entity: sensor.tank_2000l_fullstand_in_liter
        hold_action:
          action: url
          url_path: http://192.168.178.121/
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
            --primary-text-color: white !important;      
            }  
      - type: custom:fluid-level-background-card
        level_color:
          - 0
          - 0
          - 139
        background_color:
          - 0
          - 40
          - 45
        card:
          type: gauge
          entity: sensor.tank_2000l_fullstand_in_meter
          name: Tank 2000L
          min: 0
          max: 1.53
          needle: true
          severity:
            green: 0.3
            yellow: 0.7
            red: 1.1
        full_value: "1.53"
        entity: sensor.tank_2000l_fullstand_in_meter
        hold_action:
          action: url
          url_path: >-
            https://liquidcheck.si-elektronik.de/d/F4650BE27CC4_1/liquid-check-tank-2000l?orgId=1&refresh=15m
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
            --primary-text-color: white !important;      
            }  
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        color_type: card
        entity: sensor.tank_2000l_fullstand_in_liter
        tap_action:
          confirmation: true
          action: call-service
          service: rest_command.messung_tank_2000l
          data: {}
        show_icon: false
        show_label: true
        name: Liquid aktualisieren
        styles:
          card:
            - font-size: 10px
            - height: 5px
              color: white
            - font-weight: bold
            - font-family: Helvetica
        state:
          - value: 1900
            operator: ">"
            color: red
            icon: mdi:alert
            name: Füllstand kritisch hoch<br>Drücken für Aktualisierung
            styles:
              card:
                - height: 5px
                - animation: blink 1.5s linear infinite
                - filter: drop-shadow(0 0 1.0rem rgb(255,255,255))
                - background: var(--color-darkblue)
                - border: 5px
                - font-size: 10px
                - filter: opacity (70%)
          - operator: default
            icon: mdi:water
            name: Füllstand ist in Ordnung<br>Drücken für Aktualisierung
            color: "linear-gradient(145deg, #002629, #004045)"
grid_options:
  columns: 24
  rows: auto

Findet da vielleicht jemand den Fehler, sonst wird das ein anstrengender Sonntag :laughing:

2

Ich nutze diesen Code den mir ChatGPT erstellt hat und der sehr gut funktioniert:

type: custom:button-card
entity: input_boolean.ferien
name: Wir haben
layout: icon_name_state
show_name: true
show_state: true
tap_action:
  action: more-info
state_display: |
  [[[  // Anzeige des Status: 'Ferien' oder 'keine Ferien'
    return entity.state === 'on' ? 'Ferien' : 'keine Ferien';
  ]]]
styles:
  grid:
    - grid-template-areas: "\"i n\""
    - grid-template-columns: 26px auto
    - align-items: center
  card:
    - width: 180px
    - height: 35px
    - font-size: 11px
    - padding: 6px
    - border-radius: 30px
    - border: 1px solid rgba(255, 255, 255, 0.3)
    - background-color: |
        [[[  // Farbe grün bei Aktiv, sonst schwarz
          return entity.state === 'on' ? 'green' : 'black';
        ]]]
  name:
    - color: "#FFFFFF"
    - font-weight: bold
    - justify-self: start
    - padding-left: 12px

Damit erstelle ich mit der button-card solche chips-cards die aber flexibler sind:

image
image2160×290 86.6 KB