Layout issues on "area" page

[jackwilsdon]

My Home Assistant version: 2022.9.1

My lovelace configuration method (GUI or yaml): GUI

What I am doing: Viewing an area under "Settings"

What I expected to happen: The layout to not be affected by card-mod

What happened instead: The layout is affected by card-mod:

Without card-mod
With card-mod

This seems to be related to https://github.com/home-assistant/frontend/issues/13624.

Minimal steps to reproduce: just install card-mod 3.1.5 (in my case via HACS)

Error messages from the browser console: no errors, just CARD-MOD 3.1.5 IS INSTALLED.

---

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.

[jackwilsdon]

Looking at the DOM, some elements seem to have been moved out of the shadow root by card-mod which is causing the issue:

Without card-mod	With card-mod

[ildar170975]

Do not confirm this issue. Win10x64, Chrome

[Spookster]

I can confirm removing card-mod fixed the issue, so it seems the issue does occur as above

Im also curious how an addon card, not used in the rendering of this page, can effect it?

[ildar170975]

Does it happen with a default theme when card-mod is installed? I mean, some custom themes may cause glitches.

[jackwilsdon]

I'm seeing this with both a custom theme (Noctis Grey) and the default theme.

I don't think this is related to the theme - the actual DOM appears to differ when card-mod is installed.

[Spookster]

Im using the default theme.

[ildar170975]

As I already said, cannot reproduce it. Shall you test it on a fresh testing HA setup? (only card-mod is installed)

[lalexdotcom]

Same here (layout is good when card-mod is removed)

I have another layout issue when configured as "panel"... (maybe I should open another issue for this, but maybe it's related: let me know): a padding appears at the bottom of entity-pictures cards when using card_mod (cards are inside a vertical stack)

When i remove card-mod from the cards, or configure the view as a regular one (Masonry), no gap appears at the bottom as expected

[ildar170975]

After 2022.11 the glitch occurs in my setup too )))))

Have not uninstalled card-mod.

[jackwilsdon]

Looks good, thanks @thomasloven!

[ildar170975]

thanks a lot, @thomasloven !