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.

---

https://github.com/user-attachments/assets/7f63be10-23ab-499f-8d18-56dab57496a1

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

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

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

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

• [X] 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]

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.

Your point is well-taken. I updated the original post with the CSS of the class shown in the example. It should be noted, however, that this happens with any class I have applied to the card.

I also recognize that it could be an issue with weather-forecast-card and not card-mod, as the issue arose after one of the June or July HA updates.

[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.

[th3jesta]

Please see the animation. The the theme class is applied as expected (black background) until the card is shrunk down (purple background). This only happens on this one card type. It does not happen with any other card type.

[th3jesta]

I further updated the original post with the whole definition of the class in the theme file. It's fairly simple with no break points.

[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.

[th3jesta]

Yes, the purple is also defined in the theme. That is the default style, and the class overrides it. Please understand, I'm asking, why does it change when it is shrunken down? Nothing in the CSS or the theme should cause it to change when shrunk.

[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.