Increase drop zone for automation editor (#19687)

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

@@ -77,6 +77,7 @@ export default class HaAutomationAction extends LitElement {
     return html`
       <ha-sortable
         handle-selector=".handle"
+        draggable-selector="ha-automation-action-row"
         .disabled=${!this._showReorder || this.disabled}
         @item-moved=${this._actionMoved}
         group="actions"
@@ -112,30 +113,29 @@ export default class HaAutomationAction extends LitElement {
               </ha-automation-action-row>
             `
           )}
+          <div class="buttons">
+            <ha-button
+              outlined
+              .disabled=${this.disabled}
+              .label=${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.add"
+              )}
+              @click=${this._addActionDialog}
+            >
+              <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+            </ha-button>
+            <ha-button
+              .disabled=${this.disabled}
+              .label=${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.add_building_block"
+              )}
+              @click=${this._addActionBuildingBlockDialog}
+            >
+              <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+            </ha-button>
           </div>
         </div>
       </ha-sortable>
-      <div class="buttons">
-        <ha-button
-          outlined
-          .disabled=${this.disabled}
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.add"
-          )}
-          @click=${this._addActionDialog}
-        >
-          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-        </ha-button>
-        <ha-button
-          .disabled=${this.disabled}
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.add_building_block"
-          )}
-          @click=${this._addActionBuildingBlockDialog}
-        >
-          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-        </ha-button>
-      </div>
     `;
   }
 
@@ -269,14 +269,11 @@ export default class HaAutomationAction extends LitElement {
     return css`
       .actions {
         padding: 16px;
-        margin: -16px -16px 0px -16px;
+        margin: -16px;
         display: flex;
         flex-direction: column;
         gap: 16px;
       }
-      .actions:not(:has(ha-automation-action-row)) {
-        margin: -16px;
-      }
       .sortable-ghost {
         background: none;
         border-radius: var(--ha-card-border-radius, 12px);
@@ -304,6 +301,7 @@ export default class HaAutomationAction extends LitElement {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
+        order: 1;
       }
     `;
   }

src/panels/config/automation/action/types/ha-automation-action-choose.ts

@@ -122,6 +122,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
     return html`
       <ha-sortable
         handle-selector=".handle"
+        draggable-selector=".option"
         .disabled=${!this._showReorder || this.disabled}
         group="choose-options"
         .path=${[...(this.path ?? []), "choose"]}
@@ -277,18 +278,21 @@ export class HaChooseAction extends LitElement implements ActionElement {
               </div>
             `
           )}
+          <div class="buttons">
+            <ha-button
+              outlined
+              .label=${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.choose.add_option"
+              )}
+              .disabled=${this.disabled}
+              @click=${this._addOption}
+            >
+              <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+            </ha-button>
+          </div>
         </div>
       </ha-sortable>
-      <ha-button
+
-        outlined
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.type.choose.add_option"
-        )}
-        .disabled=${this.disabled}
-        @click=${this._addOption}
-      >
-        <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-      </ha-button>
       ${this._showDefault || action.default
         ? html`
             <h2>
@@ -505,14 +509,11 @@ export class HaChooseAction extends LitElement implements ActionElement {
       css`
         .options {
           padding: 16px;
-          margin: -16px -16px 0px -16px;
+          margin: -16px;
           display: flex;
           flex-direction: column;
           gap: 16px;
         }
-        .options:not(:has(.option)) {
-          margin: -16px;
-        }
         .sortable-ghost {
           background: none;
           border-radius: var(--ha-card-border-radius, 12px);
@@ -562,6 +563,12 @@ export class HaChooseAction extends LitElement implements ActionElement {
           pointer-events: none;
           height: 24px;
         }
+        .buttons {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+          order: 1;
+        }
       `,
     ];
   }

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

@@ -117,6 +117,7 @@ export default class HaAutomationCondition extends LitElement {
     return html`
       <ha-sortable
         handle-selector=".handle"
+        draggable-selector="ha-automation-condition-row"
         .disabled=${!this._showReorder || this.disabled}
         @item-moved=${this._conditionMoved}
         group="conditions"
@@ -152,29 +153,29 @@ export default class HaAutomationCondition extends LitElement {
               </ha-automation-condition-row>
             `
           )}
+          <div class="buttons">
+            <ha-button
+              outlined
+              .disabled=${this.disabled}
+              .label=${this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.add"
+              )}
+              @click=${this._addConditionDialog}
+            >
+              <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+            </ha-button>
+            <ha-button
+              .disabled=${this.disabled}
+              .label=${this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.add_building_block"
+              )}
+              @click=${this._addConditionBuildingBlockDialog}
+            >
+              <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+            </ha-button>
+          </div>
         </div>
       </ha-sortable>
-      <div class="buttons">
-        <ha-button
-          outlined
-          .disabled=${this.disabled}
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.conditions.add"
-          )}
-          @click=${this._addConditionDialog}
-        >
-          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-        </ha-button>
-        <ha-button
-          .disabled=${this.disabled}
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.conditions.add_building_block"
-          )}
-          @click=${this._addConditionBuildingBlockDialog}
-        >
-          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-        </ha-button>
-      </div>
     `;
   }
 
@@ -294,14 +295,11 @@ export default class HaAutomationCondition extends LitElement {
     return css`
       .conditions {
         padding: 16px;
-        margin: -16px -16px 0px -16px;
+        margin: -16px;
         display: flex;
         flex-direction: column;
         gap: 16px;
       }
-      .conditions:not(:has(ha-automation-condition-row)) {
-        margin: -16px;
-      }
       .sortable-ghost {
         background: none;
         border-radius: var(--ha-card-border-radius, 12px);
@@ -313,6 +311,9 @@ export default class HaAutomationCondition extends LitElement {
         display: block;
         scroll-margin-top: 48px;
       }
+      .buttons {
+        order: 1;
+      }
       ha-svg-icon {
         height: 20px;
       }

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

@@ -74,6 +74,7 @@ export default class HaAutomationTrigger extends LitElement {
     return html`
       <ha-sortable
         handle-selector=".handle"
+        draggable-selector="ha-automation-trigger-row"
         .disabled=${!this._showReorder || this.disabled}
         @item-moved=${this._triggerMoved}
         group="triggers"
@@ -108,18 +109,20 @@ export default class HaAutomationTrigger extends LitElement {
               </ha-automation-trigger-row>
             `
           )}
+          <div class="buttons">
+            <ha-button
+              outlined
+              .label=${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.add"
+              )}
+              .disabled=${this.disabled}
+              @click=${this._addTriggerDialog}
+            >
+              <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+            </ha-button>
+          </div>
         </div>
       </ha-sortable>
-      <ha-button
-        outlined
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.add"
-        )}
-        .disabled=${this.disabled}
-        @click=${this._addTriggerDialog}
-      >
-        <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-      </ha-button>
     `;
   }
 
@@ -243,14 +246,11 @@ export default class HaAutomationTrigger extends LitElement {
     return css`
       .triggers {
         padding: 16px;
-        margin: -16px -16px 0px -16px;
+        margin: -16px;
         display: flex;
         flex-direction: column;
         gap: 16px;
       }
-      .triggers:not(:has(ha-automation-trigger-row)) {
-        margin: -16px;
-      }
       .sortable-ghost {
         background: none;
         border-radius: var(--ha-card-border-radius, 12px);
@@ -274,6 +274,12 @@ export default class HaAutomationTrigger extends LitElement {
         pointer-events: none;
         height: 24px;
       }
+      .buttons {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        order: 1;
+      }
     `;
   }
 }