Add disabled info to subtitle, fixed disabled overflow (#27128)

src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts

@@ -66,9 +66,8 @@ export default class HaAutomationSidebarAction extends LitElement {
   protected render() {
     const actionConfig = this.config.config.action;
 
-    const disabled =
-      this.disabled ||
-      ("enabled" in actionConfig && actionConfig.enabled === false);
+    const rowDisabled =
+      "enabled" in actionConfig && actionConfig.enabled === false;
 
     const actionType = getAutomationActionType(actionConfig);
 
@@ -102,7 +101,13 @@ export default class HaAutomationSidebarAction extends LitElement {
       .narrow=${this.narrow}
     >
       <span slot="title">${title}</span>
-      <span slot="subtitle">${subtitle}</span>
+      <span slot="subtitle"
+        >${subtitle}${rowDisabled
+          ? html` (${this.hass.localize(
+              "ui.panel.config.automation.editor.actions.disabled"
+            )})`
+          : ""}</span
+      >
 
       <ha-md-menu-item slot="menu-items" .clickAction=${this.config.run}>
         <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
@@ -114,7 +119,7 @@ export default class HaAutomationSidebarAction extends LitElement {
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.rename}
-        .disabled=${!!disabled}
+        .disabled=${this.disabled}
       >
         <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
         <div class="overflow-label">
@@ -215,14 +220,18 @@ export default class HaAutomationSidebarAction extends LitElement {
         role="separator"
         tabindex="-1"
       ></ha-md-divider>
-      <ha-md-menu-item slot="menu-items" .clickAction=${this.config.disable}>
+      <ha-md-menu-item
+        slot="menu-items"
+        .clickAction=${this.config.disable}
+        .disabled=${this.disabled}
+      >
         <ha-svg-icon
           slot="start"
-          .path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
+          .path=${rowDisabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
         ></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
-            `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
+            `ui.panel.config.automation.editor.actions.${rowDisabled ? "enable" : "disable"}`
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>

src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts

@@ -72,9 +72,8 @@ export default class HaAutomationSidebarCondition extends LitElement {
   }
 
   protected render() {
-    const disabled =
-      this.disabled ||
-      ("enabled" in this.config.config && this.config.config.enabled === false);
+    const rowDisabled =
+      "enabled" in this.config.config && this.config.config.enabled === false;
 
     const type = this.config.config.condition;
 
@@ -103,7 +102,11 @@ export default class HaAutomationSidebarCondition extends LitElement {
       .narrow=${this.narrow}
     >
       <span slot="title">${title}</span>
-      <span slot="subtitle">${subtitle}</span>
+      <span slot="subtitle"
+        >${subtitle}${rowDisabled
+          ? ` (${this.hass.localize("ui.panel.config.automation.editor.actions.disabled")})`
+          : ""}</span
+      >
       <ha-md-menu-item slot="menu-items" .clickAction=${this._testCondition}>
         <ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon>
         <div class="overflow-label">
@@ -116,7 +119,7 @@ export default class HaAutomationSidebarCondition extends LitElement {
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.rename}
-        .disabled=${!!disabled}
+        .disabled=${this.disabled}
       >
         <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
         <div class="overflow-label">
@@ -221,14 +224,18 @@ export default class HaAutomationSidebarCondition extends LitElement {
         role="separator"
         tabindex="-1"
       ></ha-md-divider>
-      <ha-md-menu-item slot="menu-items" .clickAction=${this.config.disable}>
+      <ha-md-menu-item
+        slot="menu-items"
+        .clickAction=${this.config.disable}
+        .disabled=${this.disabled}
+      >
         <ha-svg-icon
           slot="start"
-          .path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
+          .path=${rowDisabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
         ></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
-            `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
+            `ui.panel.config.automation.editor.actions.${rowDisabled ? "enable" : "disable"}`
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>

src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts

@@ -61,7 +61,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
   }
 
   protected render() {
-    const disabled =
+    const rowDisabled =
       this.disabled ||
       ("enabled" in this.config.config && this.config.config.enabled === false);
     const type = isTriggerList(this.config.config)
@@ -85,11 +85,15 @@ export default class HaAutomationSidebarTrigger extends LitElement {
         .narrow=${this.narrow}
       >
         <span slot="title">${title}</span>
-        <span slot="subtitle">${subtitle}</span>
+        <span slot="subtitle"
+          >${subtitle}${rowDisabled
+            ? ` (${this.hass.localize("ui.panel.config.automation.editor.actions.disabled")})`
+            : ""}</span
+        >
         <ha-md-menu-item
           slot="menu-items"
           .clickAction=${this.config.rename}
-          .disabled=${disabled || type === "list"}
+          .disabled=${this.disabled || type === "list"}
         >
           <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
           <div class="overflow-label">
@@ -105,7 +109,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           ? html`<ha-md-menu-item
               slot="menu-items"
               .clickAction=${this._showTriggerId}
-              .disabled=${disabled || type === "list"}
+              .disabled=${this.disabled || type === "list"}
             >
               <ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
               <div class="overflow-label">
@@ -211,15 +215,15 @@ export default class HaAutomationSidebarTrigger extends LitElement {
         <ha-md-menu-item
           slot="menu-items"
           .clickAction=${this.config.disable}
-          .disabled=${type === "list"}
+          .disabled=${this.disabled || type === "list"}
         >
           <ha-svg-icon
             slot="start"
-            .path=${this.disabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
+            .path=${rowDisabled ? mdiPlayCircleOutline : mdiStopCircleOutline}
           ></ha-svg-icon>
           <div class="overflow-label">
             ${this.hass.localize(
-              `ui.panel.config.automation.editor.actions.${disabled ? "enable" : "disable"}`
+              `ui.panel.config.automation.editor.actions.${rowDisabled ? "enable" : "disable"}`
             )}
             <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
           </div>

src/panels/config/automation/trigger/ha-automation-trigger-editor.ts

@@ -144,9 +144,6 @@ export default class HaAutomationTriggerEditor extends LitElement {
           pointer-events: none;
         }
 
-        .card-content {
-          padding: 16px;
-        }
         .card-content.yaml {
           padding: 0 1px;
           border-top: 1px solid var(--divider-color);