From beec720b9bba693f14896f94baac18c921506dab Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Fri, 28 Jun 2024 20:56:01 +0200
Subject: [PATCH] Use display contents in horizontal stack only (#21217)

---
 src/panels/lovelace/cards/hui-card.ts                  | 3 ---
 src/panels/lovelace/cards/hui-horizontal-stack-card.ts | 3 +++
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-card.ts b/src/panels/lovelace/cards/hui-card.ts
index d47bffc1f5..54b079d1b7 100644
--- a/src/panels/lovelace/cards/hui-card.ts
+++ b/src/panels/lovelace/cards/hui-card.ts
@@ -45,9 +45,6 @@ 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-horizontal-stack-card.ts b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
index 4e867e5b0e..e224953ade 100644
--- a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
@@ -30,6 +30,9 @@ export class HuiHorizontalStackCard extends HuiStackCard {
           height: 100%;
           gap: var(--horizontal-stack-card-gap, var(--stack-card-gap, 8px));
         }
+        #root > hui-card {
+          display: contents;
+        }
         #root > hui-card > * {
           flex: 1 1 0;
           min-width: 0;