From 9ad9c569a6c0a2f760fc7d0246a6e3d751a45095 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 15 Jul 2020 15:33:55 +0200
Subject: [PATCH] Fix button position entity settings dialog (#6395)

---
 src/components/ha-dialog.ts                   |  2 +-
 src/dialogs/more-info/ha-more-info-dialog.ts  |  1 +
 .../config/entities/dialog-entity-editor.ts   |  1 +
 .../settings/entity-settings-helper-tab.ts    | 66 +++++++++++--------
 .../entities/entity-registry-settings.ts      | 15 +++--
 5 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 03472c6495..2b87e25cfa 100644
--- a/src/components/ha-dialog.ts
+++ b/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 {
diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index 28c8cfb7fb..6ad4f15421 100644
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/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;
         }
 
diff --git a/src/panels/config/entities/dialog-entity-editor.ts b/src/panels/config/entities/dialog-entity-editor.ts
index a05af41466..0403b0ffc5 100644
--- a/src/panels/config/entities/dialog-entity-editor.ts
+++ b/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;
         }
 
diff --git a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts
index e0e8142ca8..fbaa723ec8 100644
--- a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts
+++ b/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 {
-    return css`
-      :host {
-        display: block;
-        padding: 0 !important;
-      }
-      .form {
-        padding: 20px 24px;
-      }
-      .buttons {
-        display: flex;
-        justify-content: space-between;
-        padding: 8px;
-        margin-bottom: -20px;
-      }
-      mwc-button.warning {
-        --mdc-theme-primary: var(--error-color);
-      }
-      .error {
-        color: var(--error-color);
-      }
-      .row {
-        margin-top: 8px;
-        color: var(--primary-text-color);
-      }
-      .secondary {
-        color: var(--secondary-text-color);
-      }
-    `;
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        :host {
+          display: block;
+          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: space-between;
+          padding: 8px;
+          background-color: var(--mdc-theme-surface, #fff);
+        }
+        .error {
+          color: var(--error-color);
+        }
+        .row {
+          margin-top: 8px;
+          color: var(--primary-text-color);
+        }
+        .secondary {
+          color: var(--secondary-text-color);
+        }
+      `,
+    ];
   }
 }
 
diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts
index c26c8a631f..176d669515 100644
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/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;
-        }
-        mwc-button.warning {
-          margin-right: auto;
+          background-color: var(--mdc-theme-surface, #fff);
         }
         ha-switch {
           margin-right: 16px;