Weather widget ignores `middle` class in mobile mode

[derkork]

I have set up a weather widget stack liket this:

type: vertical-stack
cards:
  - type: markdown
    content: '# Planetares Wetter'
    card_mod:
      class: header
  - type: weather-forecast
    show_forecast: false
    show_current: true
    name: AKTUELL
    forecast_type: daily
    entity: weather.home
    card_mod:
      class: middle
  - type: weather-forecast
    show_forecast: true
    show_current: false
    name: AKTUELL
    forecast_type: daily
    entity: weather.home
    card_mod:
      class: middle
  - type: entity
    card_mod:
      class: middle
    entity: sensor.sun_next_dawn
  - type: entity
    entity: sensor.sun_next_dusk
    card_mod:
      class: middle
  - type: markdown
    content: '###   '
    card_mod:
      class: footer

On the desktop this renders nicely to:

However in mobile mode the middle class seems to be ignored for the weather widget and I get this:

[th3jesta]

This is an issue where Home Assistant overwrites the classes when the viewport is narrow. I have reported the issue to the card-mod developers, as it's not caused by HA-LCARS. https://github.com/thomasloven/lovelace-card-mod/issues/386

Workarounds are:

• Use a different weather card, such as https://github.com/bramkragten/weather-card
• Manually apply the style to the card, such as:

  type: weather-forecast
  entity: weather.home
  forecast_type: daily
  card_mod:
  style: |
  ha-card {
    background: black !important;
    text-transform: uppercase;
    border-radius: 0px !important;
    border-left: 35.5px solid var(--lcars-card-mid-left-color);
    padding-left: 6px !important;
  }

[derkork]

Thank you very much for investigating this and providing a workaround!