Frontend 20240131.0 issues

[jeremynoesen]

My Home Assistant version: 2024.1.6

My lovelace configuration method (GUI or yaml): yaml

What I am doing: Modifying the margins of cards (mainly in horizontal stacks)

What I expected to happen: Margins would be modified and the correct size (behavior before frontend 20240131.0)

What happened instead: Due to new changes to lovelace card margins, mainly from this commit, margins are not correct when modifying horizontal margins. They are now smaller than actual and inconsistent.

Minimal steps to reproduce: Create a mod-card, put a horizontal stack as the card, put 2-3 cards in the stack, and set the margin to something larger than normal.

# The least amount of code possible to reproduce my error
views:
  - title: Test
    cards:
      - type: custom:mod-card
        card_mod:
          style: |
            ha-card {
              --horizontal-stack-card-margin: 0 24px 0 0 !important;
            }
        card:
          type: horizontal-stack
          cards:
            - show_name: true
              show_icon: true
              type: button
              name: Test
              icon: mdi:test-tube
            - show_name: true
              show_icon: true
              type: button
              name: Test
              icon: mdi:test-tube
            - show_name: true
              show_icon: true
              type: button
              name: Test
              icon: mdi:test-tube
# End of code

Error messages from the browser console: None

---

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]

Wrong use of card-mod. Read release notes for 3.4.0.

[ildar170975]

As for the mentioned commit. Have not installed the latest Frontend yet; will check the issue with margins after update, thank you!

Also, if you think that that commit broke margins - then I would suggest you to open an issue in Frontend. If it is a bug - it should be fixed before 2024.2.

[jeremynoesen]

Wrong use of card-mod. Read release notes for 3.4.0.

I for some reason thought a mod-card didn't need the card_mod: part. My styling has been working without that bit, and adding it did not change anything.

As for the mentioned commit. Have not installed the latest Frontend yet; will check the issue with margins after update, thank you!

Also, if you think that that commit broke margins - then I would suggest you to open an issue in Frontend. If it is a bug - it should be fixed before 2024.2.

I do not believe it is a bug within the frontend. Setting up a dashboard that doesn't use card mod looks normal still.

[ildar170975]

I for some reason thought a mod-card didn't need the card_mod: part. My styling has been working without that bit, and adding it did not change anything.

1. You created an issue with card-mod code and said "the code does not work".
2. It turned out that the card-mod code is wrong.
3. Are you refusing to re-check with a fixed code?

Are you saying that:

1. The described card-mod code does not work.
2. UI behaves bad after adding the card-mod code - but does behave OK w/o card-mod.

??

[jeremynoesen]

I for some reason thought a mod-card didn't need the card_mod: part. My styling has been working without that bit, and adding it did not change anything.

1. You created an issue with card-mod code and said "the code does not work".

2. It turned out that the card-mod code is wrong.

3. Are you refusing to re-check with a fixed code?

Are you saying that:

1. The described card-mod code does not work.

2. UI behaves bad after adding the card-mod code - but does behave OK w/o card-mod.

??

I did add the card_mod: part to the yaml, and the behavior did not change. I kept card_mod: in since thats correct for 3.4.0. No need to be so rude about it.

The code I provided, even after fixing it like above, produces the same issue. Taking away card mod, the UI is normal with no issues. This exact configuration worked fine in the previous frontend version (before 20240131.0).

[jeremynoesen]

I updated my original comment with updated code including card_mod:

[ildar170975]

I am not being rude, the issues should be described more clear. Trust me, there are plenty of possible "decryptions" of the current description.

Here some 2 possible "decryptions", which is a correct one?

One:

1. Due to some personal reasons, I added card-mod to style some standard stack (with a proper syntax as per 3.4.0 requirements).
2. It was working OK.
3. Starting from 20240131 - the card-mod code stopped working.

Two:

1. Starting from 20240131 - I see some issues with margins for a stack.
2. That is why I tried to fix these issues by card-mod.
3. But my card-mod does not fix these issues.

[jeremynoesen]

Interpretation one is what I am trying to convey.

[ildar170975]

OK. Then let's wait for 2024.2, we'll try to reproduce it.

Have you checked Code Inspector, can you see the style applied?

[jeremynoesen]

Yes I have, and the style does apply.

[ildar170975]

and the style does apply.

))))))))) So card-mod does work?

[jeremynoesen]

Card mod works, but the behavior is not the same. When running the code provided before 20240131, it creates a horizontal stack with 24px margins between all cards. On 20240131, the margin only applies to one of the two gaps. So card mod does still apply styles, it's just that the new changes to margins within the frontend is causing unexpected behavior.

[jeremynoesen]

Whether this is something to be fixed on card mod's side, or a css thing that now has to be accounted for, I'm not sure, but hopefully we can figure it out.

[ildar170975]

Here is what I see (2024.1.1):

the 1st, 2nd cards:

The 3rd card has 0 margins since the style is overridden by

i.e. card-mod style does work. Now post what you see.

[ildar170975]

Also, do one more test:

Add this view:

cards:

  - type: custom:mod-card
    card_mod:
      style: |
        ha-card {
          --horizontal-stack-card-margin: 0 24px 0 0 !important;
        }
    card: &ref_stack
      type: horizontal-stack
      cards: 
        - show_name: true
          show_icon: true
          type: button
          name: Test
          icon: mdi:test-tube
        - show_name: true
          show_icon: true
          type: button
          name: Test
          icon: mdi:test-tube
        - show_name: true
          show_icon: true
          type: button
          name: Test
          icon: mdi:test-tube

  - *ref_stack

and use this custom theme:

test_minimal:
  horizontal-stack-card-margin: 0 24px 0 0

In my case both stacks (with & w/o card-mod) looks same.

[jeremynoesen]

From your first comment, here is what I see on 2024.2.0b1:

Button 1:

Button 2:

Button 3:

The button 1 and 3 respectively have extra CSS that seem to affect the margins (aside from the 0 margins from before). This block is absent from button 2.

[jeremynoesen]

For your second comment, they both look like this:

This must not be a card mod issue then. There has been more commits dealing with RTL fixes and margins to the frontend, so I will wait for the next frontend update and open an issue there. Thanks for the help.

[ildar170975]

The card-mod from the 1st post (as well as a posted theme) may only work if the --horizontal-stack-card-margin is used in UI - like it is used here:

May be the new shiny implementation does not have this variable at all. Since the variable is not declared as "officially supported" - this variable may be removed any time w/o any warnings. Same happened in 2022.11 with --paper-item-icon-active-color.

Check again in Code Inspector - can you see that --horizontal-stack-card-margin variable used? If not - then users probably need to find another variable for themes )))))

There has been more commits dealing with RTL fixes

I would not count on eliminating all bugs by themselves. Suggest to ask in Github: "WTH you removed my variable???"

Check the code: https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/cards/hui-horizontal-stack-card.ts and see this: https://github.com/home-assistant/frontend/blob/7b3797502aa804f62b641a0b1ecc2e834c84d4e8/src/panels/lovelace/cards/hui-horizontal-stack-card.ts#L37 So, this variable should work (I hope).

[jeremynoesen]

Yeah even when setting that variable, it seems to go unused. I tested the theme is actually working by modifying the background color of the dashboard, and the color did change. I opened an issue in the frontend, as the commits I browsed did not touch the horizontal stack card at all.

[ildar170975]

I see https://github.com/home-assistant/frontend/issues/19611 Suggest to add screenshots from Code inspector to show that variable is not applied.

[ildar170975]

Guess the card-mod issue may be closed ))))

[jeremynoesen]

Yes, thank you again for helping me find the real issue.

[ildar170975]

Welcome. I will wait for 2024.2 to test the issue.

[jeremynoesen]

Looks like it does still apply it, it just gets overridden by other margins.

[ildar170975]

Looking at

        #root {
          --stack-card-side-margin: 4px;
        }
        #root > * {
          flex: 1 1 0;
          margin: var(
            --horizontal-stack-card-margin,
            var(--stack-card-margin, 0 var(--stack-card-side-margin))
          );
          min-width: 0;
        }
        #root > *:first-child {
          margin-left: 0;
          margin-inline-start: 0;
          margin-inline-end: var(--stack-card-side-margin);
        }
        #root > *:last-child {
          margin-right: 0;
          margin-inline-end: 0;
          margin-inline-start: var(--stack-card-side-margin);
        }

~it seems that margin must be equal to --horizontal-stack-card-margin...~ OK, cannot say more before testing.

I see, the --horizontal-stack-card-margin only works for the 2nd button, and NOT in the 1st & the last. These "inline" margins broke it.