diff --git a/src/panels/lovelace/cards/hui-card.ts b/src/panels/lovelace/cards/hui-card.ts index 6249acaba095..b4ca36b94e86 100644 --- a/src/panels/lovelace/cards/hui-card.ts +++ b/src/panels/lovelace/cards/hui-card.ts @@ -43,6 +43,9 @@ export class HuiCard extends ReactiveElement { private _listeners: MediaQueriesListener[] = []; protected createRenderRoot() { + const style = document.createElement("style"); + style.textContent = `hui-card { display: contents }`; + this.append(style); return this; } diff --git a/src/panels/lovelace/cards/hui-grid-card.ts b/src/panels/lovelace/cards/hui-grid-card.ts index 97b336c529cb..0838db77d9ba 100644 --- a/src/panels/lovelace/cards/hui-grid-card.ts +++ b/src/panels/lovelace/cards/hui-grid-card.ts @@ -92,6 +92,7 @@ class HuiGridCard extends HuiStackCard { } :host([square]) #root > *:not([hidden]) { + display: block; grid-row: 1 / 1; grid-column: 1 / 1; } diff --git a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts index 502e54db4dd7..4e867e5b0e2f 100644 --- a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts +++ b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts @@ -30,7 +30,7 @@ export class HuiHorizontalStackCard extends HuiStackCard { height: 100%; gap: var(--horizontal-stack-card-gap, var(--stack-card-gap, 8px)); } - #root > * { + #root > hui-card > * { flex: 1 1 0; min-width: 0; }