Card-mod causes Energy dashboard to load on half of the screen

[Wesley-Vos]

My Home Assistant version: 2023.11.0b0

My lovelace configuration method (GUI or yaml): GUI

What I am doing: opening the energy dashboard

What I expected to happen: it shows full screen

What happened instead: it is shown half screen because card-mod inserts an element that is in the same flexbox as the actual content

Minimal steps to reproduce:

1. Update to 2023.11.0.b0
2. Open the energy dashboard

# The least amount of code possible to reproduce my error
Not appliciable

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

[firstof9]

Example image:

[mhoogenbosch]

To be expected, but B1 has the same.

[Wesley-Vos]

I've already done some digging in the card-mod code as well as the HA changes of the latest releases but didn't came to a solution. If there is someone who can point me in the right direction, I'm more than happy to try to fix it.

[holdestmade]

Same issue here, on b2

[firstof9]

I've already done some digging in the card-mod code as well as the HA changes of the latest releases but didn't came to a solution.

Did you rummage around the frontend repo? That's where it would have been tucked away.

[Wesley-Vos]

I've already done some digging in the card-mod code as well as the HA changes of the latest releases but didn't came to a solution.

Did you rummage around the frontend repo? That's where it would have been tucked away.

Yes I did but couldn't find a change that might causes this. The closest I got was a removed (assumed unused) parameter from the LovelaceStrategy....

We might raise an issue in the frontend repo asking if they could identify which change might cause this. Fixing this issue would also decrease the number of issues raised on the release day this week.

[firstof9]

When I view the source on the energy dash I see something weird that looks like it's causing the flexbox to split in half:

<hui-view id="view"><hui-sidebar-view></hui-sidebar-view><card-mod slot="none"><!---->
      <style>
        <!---->
      <!----></style>
    </card-mod></hui-view>

Note the <card-mod> bits, when I delete this element the panel goes to normal size.

[Wesley-Vos]

It is indeed the part you are showing in your comment. The card-mod slot element causes the hue-view to show it like another real element and makes the actual energy view take 50% of the screen.

You can test it by manually dropping the card-mod element in the dev tools of your browser (will be automatically added after a few seconds). You will see that the energy screen goes back to normal.

Using another flex direction helps but I've no idea how to do that (because it is not card-mod who is setting this)

[Wesley-Vos]

I suspect this change to be the cause, asked there if that is indeed true. https://github.com/home-assistant/frontend/pull/18201

[holdestmade]

Looking on discord, someone states it's fixed in b3, anyone here tested it yet ?

EDIT Still not working on B4

[firstof9]

It does in fact seem fixed in b3.

Replied too soon. Still broken in b3.

[Wesley-Vos]

It is not working for me either

[firstof9]

FYI, Still no good in b6

[Wesley-Vos]

I personally don’t expect this to be fixed by a core/ frontend release. This issue is specially happening due to card-mod so why should they.

I ‘need’ card-mod for quite some styling on my main dashboards so cannot remove it either. Luckily, it is only the energy dashboard that is effected but still not good

[lordwizzard]

Still broke in the release to all HA users. Funny, that if I refresh/reload the Energy Dashboard page (using the browser refresh/reload) it goes back to normal size. If I go do something else in HA and come back to the Energy page it shrinks back.

[DieMetRik]

Have the same issue after update to 11.0

[DaN66O]

I have the same problem after upgrading to core-2023.11.0

[Wesley-Vos]

Yes, this fixes it! Thanks @thomasloven

[mhoogenbosch]

Confirmed: 3.2.4 solves the issue.

[ChristophCaina]

I cannot confirm that this issue has been solved. I am runnining Card-Mod 3.2.4 and still my Energy Dashboard looks the same.

Refreshing the Screen (F5) does help, but as soon as you leave the Dashboard and then go back to it, it's using half of the screen size.

[Wesley-Vos]

For me it was a matter of quite some reloading and clearing the full cache in the browser, did you do that? As soon as the new card-mod file was loaded, everything was fine. The change that is done to fix this issue could not cause the energy screen to load half anymore so it is highly likely it is a cache issue.

[ChristophCaina]

well... it seems that this time, it was really a cache-thing... Usually, such things do resolve with a Control+F5 to refresh without cache... this time, it did not work...

Sorry....