Fix button position entity settings dialog (#6395)

src/components/ha-dialog.ts

@@ -51,7 +51,7 @@ export class HaDialog extends MwcDialog {
           padding: var(--dialog-content-padding, 20px 24px);
         }
         .mdc-dialog .mdc-dialog__surface {
-          position: var(--dialog-content-position, relative);
+          position: var(--dialog-surface-position, relative);
           min-height: var(--mdc-dialog-min-height, auto);
         }
         .header_button {

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -248,6 +248,7 @@ export class MoreInfoDialog extends LitElement {
       haStyleDialog,
       css`
         ha-dialog {
+          --dialog-surface-position: static;
           --dialog-content-position: static;
         }
 

src/panels/config/entities/dialog-entity-editor.ts

@@ -245,6 +245,7 @@ export class DialogEntityEditor extends LitElement {
         }
 
         ha-dialog {
+          --dialog-content-position: static;
           --dialog-content-padding: 0;
         }
 

src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts

@@ -52,6 +52,7 @@ import "../../../helpers/forms/ha-input_select-form";
 import "../../../helpers/forms/ha-input_text-form";
 import "../../entity-registry-basic-editor";
 import type { HaEntityRegistryBasicEditor } from "../../entity-registry-basic-editor";
+import { haStyle } from "../../../../../resources/styles";
 
 const HELPERS = {
   input_boolean: {
@@ -219,35 +220,42 @@ export class EntityRegistrySettingsHelper extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResult[] {
-    return css`
+    return [
-      :host {
+      haStyle,
-        display: block;
+      css`
-        padding: 0 !important;
+        :host {
-      }
+          display: block;
-      .form {
+          padding: 0 !important;
-        padding: 20px 24px;
+        }
-      }
+        .form {
-      .buttons {
+          padding: 20px 24px;
-        display: flex;
+          margin-bottom: 53px;
-        justify-content: space-between;
+        }
-        padding: 8px;
+        .buttons {
-        margin-bottom: -20px;
+          position: absolute;
-      }
+          bottom: 0;
-      mwc-button.warning {
+          width: 100%;
-        --mdc-theme-primary: var(--error-color);
+          box-sizing: border-box;
-      }
+          border-top: 1px solid
-      .error {
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
-        color: var(--error-color);
+          display: flex;
-      }
+          justify-content: space-between;
-      .row {
+          padding: 8px;
-        margin-top: 8px;
+          background-color: var(--mdc-theme-surface, #fff);
-        color: var(--primary-text-color);
+        }
-      }
+        .error {
-      .secondary {
+          color: var(--error-color);
-        color: var(--secondary-text-color);
+        }
-      }
+        .row {
-    `;
+          margin-top: 8px;
+          color: var(--primary-text-color);
+        }
+        .secondary {
+          color: var(--secondary-text-color);
+        }
+      `,
+    ];
   }
 }
 

src/panels/config/entities/entity-registry-settings.ts

@@ -226,19 +226,22 @@ export class EntityRegistrySettings extends LitElement {
       css`
         :host {
           display: block;
-          margin-bottom: 0 !important;
-          padding: 0 !important;
         }
         .form {
           padding: 20px 24px;
+          margin-bottom: 53px;
         }
         .buttons {
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+          box-sizing: border-box;
+          border-top: 1px solid
+            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
           display: flex;
-          justify-content: flex-end;
+          justify-content: space-between;
           padding: 8px;
-        }
+          background-color: var(--mdc-theme-surface, #fff);
-        mwc-button.warning {
-          margin-right: auto;
         }
         ha-switch {
           margin-right: 16px;