From c738127c0923e2f7d2a00c3bd5ecd212835815da Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 6 Feb 2024 11:36:22 +0100
Subject: [PATCH] Fix horizontal stack margin (#19700)

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

diff --git a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
index 57adc6f581..83a1c9ae08 100644
--- a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
@@ -29,26 +29,25 @@ export class HuiHorizontalStackCard extends HuiStackCard {
           display: flex;
           height: 100%;
         }
-        #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))
+            var(--stack-card-margin, 0 4px)
           );
           min-width: 0;
         }
-        #root > *:first-child {
+        #root[dir="ltr"] > *:first-child {
           margin-left: 0;
-          margin-inline-start: 0;
-          margin-inline-end: var(--stack-card-side-margin);
         }
-        #root > *:last-child {
+        #root[dir="ltr"] > *:last-child {
           margin-right: 0;
-          margin-inline-end: 0;
-          margin-inline-start: var(--stack-card-side-margin);
+        }
+        #root[dir="rtl"] > *:first-child {
+          margin-right: 0;
+        }
+        #root[dir="rtl"] > *:last-child {
+          margin-left: 0;
         }
       `,
     ];
diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts
index 49ea00828a..70a925e44c 100644
--- a/src/panels/lovelace/cards/hui-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-stack-card.ts
@@ -12,6 +12,7 @@ import { HomeAssistant } from "../../../types";
 import { createCardElement } from "../create-element/create-card-element";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { StackCardConfig } from "./types";
+import { computeRTLDirection } from "../../../common/util/compute_rtl";
 
 export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
   extends LitElement
@@ -77,7 +78,9 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
       ${this._config.title
         ? html`<h1 class="card-header">${this._config.title}</h1>`
         : ""}
-      <div id="root">${this._cards}</div>
+      <div id="root" dir=${this.hass ? computeRTLDirection(this.hass) : "ltr"}>
+        ${this._cards}
+      </div>
     `;
   }