weather-forecast-card class breaks when compressed horizontally

[th3jesta]

My Home Assistant version: 2024.7.1

My lovelace configuration method (GUI or yaml): Either.

What I am doing:
Applying a class from the theme file to the weather-forecast-card.

What I expected to happen:
Class should apply at all viewport sizes.

What happened instead:
This is reported by many users of my theme, HA-LCARS, and I have confirmed the behavior. Theme classes applied to the weather-forecast-card do not work in mobile view, or on desktop view where there is sufficient horizontal compression of the view. For example, in a dashboard with 3-4 columns, it seems that the class disappears when the viewport is at <=1412px wide, and less than that with fewer columns. I suspect the state of the side bar also influences this.

Minimal steps to reproduce:
Apply a class to the weather-forecast-card, and then reduce the size of the window/viewport. Eventually, you will see the styling of the class disappears.

# Card configuration:
type: weather-forecast
entity: weather.home
forecast_type: daily
card_mod:
  class: test

# Theme file:
Test:
  card-mod-theme: Test
  card-mod-card-yaml: |
    .: |
      ha-card.test {
        background: green !important;
      }

Error messages from the browser console:
None.

---

Untitled.mov

By putting an X in the boxes ([]) below, I indicate that I:

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• Have made sure I am using the latest version of the plugin.

• Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[ildar170975]

Apply a class to the weather-forecast-card, and then reduce the size of the window/viewport. Eventually, you will see the styling of the class disappears.

This depends on a particular class.
A class is defined by a user, it is not smth provided by card-mod or Thomas.
If a class is defined in a wrong way, if a particular client processes CSS attributes in a wrong way - results may vary from a user expectation.

[th3jesta]

Interestingly, I just validated that it does not happen if the CSS is applied directly to the card, instead of the theme file, as so:

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;
    }

[ildar170975]

it does not happen if the CSS is applied directly to the card

Then may be your theme file is wrong.
Check by a Code inspector if the card gets this "middle" class.

[ildar170975]

purple background

Is it also defined in this theme file?
Asking because it is supposed to be white/black in a default theme.
May be you got conflicting styles in a theme.

[ildar170975]

Then I would suggest you to test with a MINIMAL theme which only contains:

• that class' definition
• that purple background color

if you still see the issue - then post this MINIMAL theme here to allow users to reproduce the issue.

[ildar170975]

I found a possible reason.
HA adds an own class "very-narrow" - and this replaces your user-defined class.

HA adds classes like "narrow", "very-narrow" to some cards.
For the weather-forecast card the glitch is observed.

Short way to reproduce:

test_minimal:
  card-mod-theme: test_minimal
  card-mod-card-yaml: |
      .: |
        ha-card.class1 {
          background: red;
        }

title: xxxx
path: xxxx
cards:

  - <<: &ref_weather_card
      type: weather-forecast
      entity: weather.home_met
      forecast_type: daily
    card_mod:
      class: class1

  - <<: *ref_weather_card
    card_mod:
      style: |
        ha-card {
          background: cyan;
        }

  - <<: *ref_weather_card
  - <<: *ref_weather_card

When not narrowed:

When narrowed:

[th3jesta]

Hid my previous comments as they are no longer relevant to discussion or the current state of the issue and examples.