From 193caec2dfb7b86c5e939b03216c0e89441ff5a2 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Sat, 10 May 2025 09:03:53 +0200
Subject: [PATCH] Render choose and if action correctly on mobile (#25411)

---
 .../automation/action/types/ha-automation-action-choose.ts   | 4 ++++
 .../automation/action/types/ha-automation-action-if.ts       | 5 +++++
 .../config/automation/option/ha-automation-option-row.ts     | 2 ++
 3 files changed, 11 insertions(+)

diff --git a/src/panels/config/automation/action/types/ha-automation-action-choose.ts b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
index 07498c4606..2c193cc024 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
@@ -18,6 +18,8 @@ export class HaChooseAction extends LitElement implements ActionElement {
 
   @property({ attribute: false }) public action!: ChooseAction;
 
+  @property({ type: Boolean }) public narrow = false;
+
   @state() private _showDefault = false;
 
   public static get defaultConfig(): ChooseAction {
@@ -35,6 +37,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
         .disabled=${this.disabled}
         @value-changed=${this._optionsChanged}
         .hass=${this.hass}
+        .narrow=${this.narrow}
       ></ha-automation-option>
 
       ${this._showDefault || action.default
@@ -49,6 +52,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
               .disabled=${this.disabled}
               @value-changed=${this._defaultChanged}
               .hass=${this.hass}
+              .narrow=${this.narrow}
             ></ha-automation-action>
           `
         : html`
diff --git a/src/panels/config/automation/action/types/ha-automation-action-if.ts b/src/panels/config/automation/action/types/ha-automation-action-if.ts
index 2d7b8f1ecf..3b1eb99120 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-if.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-if.ts
@@ -18,6 +18,8 @@ export class HaIfAction extends LitElement implements ActionElement {
 
   @property({ attribute: false }) public action!: IfAction;
 
+  @property({ type: Boolean }) public narrow = false;
+
   @state() private _showElse = false;
 
   public static get defaultConfig(): IfAction {
@@ -41,6 +43,7 @@ export class HaIfAction extends LitElement implements ActionElement {
         .disabled=${this.disabled}
         @value-changed=${this._ifChanged}
         .hass=${this.hass}
+        .narrow=${this.narrow}
       ></ha-automation-condition>
 
       <h3>
@@ -53,6 +56,7 @@ export class HaIfAction extends LitElement implements ActionElement {
         .disabled=${this.disabled}
         @value-changed=${this._thenChanged}
         .hass=${this.hass}
+        .narrow=${this.narrow}
       ></ha-automation-action>
       ${this._showElse || action.else
         ? html`
@@ -66,6 +70,7 @@ export class HaIfAction extends LitElement implements ActionElement {
               .disabled=${this.disabled}
               @value-changed=${this._elseChanged}
               .hass=${this.hass}
+              .narrow=${this.narrow}
             ></ha-automation-action>
           `
         : html` <div class="link-button-row">
diff --git a/src/panels/config/automation/option/ha-automation-option-row.ts b/src/panels/config/automation/option/ha-automation-option-row.ts
index c9e97e2d46..b9e9434d63 100644
--- a/src/panels/config/automation/option/ha-automation-option-row.ts
+++ b/src/panels/config/automation/option/ha-automation-option-row.ts
@@ -183,6 +183,7 @@ export default class HaAutomationOptionRow extends LitElement {
               )}
               .disabled=${this.disabled}
               .hass=${this.hass}
+              .narrow=${this.narrow}
               @value-changed=${this._conditionChanged}
             ></ha-automation-condition>
             <h4>
@@ -194,6 +195,7 @@ export default class HaAutomationOptionRow extends LitElement {
               .actions=${ensureArray(this.option.sequence) || []}
               .disabled=${this.disabled}
               .hass=${this.hass}
+              .narrow=${this.narrow}
               @value-changed=${this._actionChanged}
             ></ha-automation-action>
           </div>