Stack Action Inputs in the Button Editor (#12076)

* Stack Action Inputs in the Button Editor

* update style

* Update for other editors

src/panels/lovelace/editor/config-elements/config-elements-style.ts

@@ -1,6 +1,10 @@
 import { css } from "lit";
 
 export const configElementStyle = css`
+  .card-config {
+    /* Cancels overlapping Margins for HAForm + Card Config options */
+    overflow: auto;
+  }
   ha-switch {
     padding: 16px 6px;
   }
@@ -25,5 +29,6 @@ export const configElementStyle = css`
   ha-textfield,
   ha-icon-picker {
     margin-top: 8px;
+    display: block;
   }
 `;

src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts

@@ -1,22 +1,22 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, boolean, object, optional, string, assign } from "superstruct";
-import type { HassEntity } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
+import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { computeDomain } from "../../../../common/entity/compute_domain";
+import { domainIcon } from "../../../../common/entity/domain_icon";
+import "../../../../components/ha-form/ha-form";
+import type { HaFormSchema } from "../../../../components/ha-form/types";
 import { ActionConfig } from "../../../../data/lovelace";
 import type { HomeAssistant } from "../../../../types";
 import type { ButtonCardConfig } from "../../cards/types";
 import "../../components/hui-action-editor";
-import "../../../../components/ha-form/ha-form";
 import type { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import type { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { domainIcon } from "../../../../common/entity/domain_icon";
-import type { HaFormSchema } from "../../../../components/ha-form/types";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -149,7 +149,6 @@ export class HuiButtonCardEditor
         @value-changed=${this._valueChanged}
       ></ha-form>
       <div class="card-config">
-        <div class="side-by-side">
         <hui-action-editor
           .label="${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.tap_action"
@@ -181,7 +180,6 @@ export class HuiButtonCardEditor
           @value-changed=${this._actionChanged}
         ></hui-action-editor>
       </div>
-      </div>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts

@@ -1,6 +1,6 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, object, optional, string, assign } from "superstruct";
+import { assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -9,9 +9,9 @@ import "../../components/hui-action-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -78,7 +78,6 @@ export class HuiPictureCardEditor
           .configValue=${"theme"}
           @value-changed=${this._valueChanged}
         ></hui-theme-select-editor>
-        <div class="side-by-side">
         <hui-action-editor
           .label="${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.tap_action"
@@ -104,7 +103,6 @@ export class HuiPictureCardEditor
           @value-changed=${this._valueChanged}
         ></hui-action-editor>
       </div>
-      </div>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts

@@ -108,7 +108,6 @@ export class HuiPictureEntityCardEditor
         @value-changed=${this._valueChanged}
       ></ha-form>
       <div class="card-config">
-        <div class="side-by-side">
         <hui-action-editor
           .label="${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.tap_action"
@@ -134,7 +133,6 @@ export class HuiPictureEntityCardEditor
           @value-changed=${this._changed}
         ></hui-action-editor>
       </div>
-      </div>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts

@@ -1,13 +1,13 @@
-import "../../components/hui-action-editor";
-import "../../../../components/ha-form/ha-form";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { array, assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../components/ha-form/types";
 import type { ActionConfig } from "../../../../data/lovelace";
 import type { HomeAssistant } from "../../../../types";
 import type { PictureGlanceCardConfig } from "../../cards/types";
+import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import type { EntityConfig } from "../../entity-rows/types";
 import type { LovelaceCardEditor } from "../../types";
@@ -96,7 +96,6 @@ export class HuiPictureGlanceCardEditor
         @value-changed=${this._valueChanged}
       ></ha-form>
       <div class="card-config">
-        <div class="side-by-side">
         <hui-action-editor
           .label=${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.tap_action"
@@ -117,7 +116,6 @@ export class HuiPictureGlanceCardEditor
           .configValue=${"hold_action"}
           @value-changed=${this._valueChanged}
         ></hui-action-editor>
-        </div>
         <hui-entity-editor
           .hass=${this.hass}
           .entities=${this._configEntities}