From d83b3081007a57c604b2f69b3ea57ea5df1a028a Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 12 Mar 2020 01:10:26 +0100
Subject: [PATCH] Fix area dialog too wide (#5136)

* Fix area dialog to wide

* Update styles
---
 .../areas/dialog-area-registry-detail.ts      |  3 ---
 .../entities/entity-registry-settings.ts      |  7 ------
 src/resources/styles.ts                       | 22 +++++++++++++++++--
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/panels/config/areas/dialog-area-registry-detail.ts b/src/panels/config/areas/dialog-area-registry-detail.ts
index 093f099766..af7410c8c5 100644
--- a/src/panels/config/areas/dialog-area-registry-detail.ts
+++ b/src/panels/config/areas/dialog-area-registry-detail.ts
@@ -142,9 +142,6 @@ class DialogAreaDetail extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-paper-dialog {
-          min-width: 400px;
-        }
         .form {
           padding-bottom: 24px;
         }
diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts
index 757d0d6197..d26b1461fc 100644
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/src/panels/config/entities/entity-registry-settings.ts
@@ -241,18 +241,11 @@ export class EntityRegistrySettings extends LitElement {
         }
         mwc-button.warning {
           margin-right: auto;
-          --mdc-theme-primary: var(--google-red-500);
-        }
-        .error {
-          color: var(--google-red-500);
         }
         .row {
           margin-top: 8px;
           color: var(--primary-text-color);
         }
-        .secondary {
-          color: var(--secondary-text-color);
-        }
       `,
     ];
   }
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index 972e734538..00d4f05b8f 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -76,6 +76,22 @@ export const haStyle = css`
     @apply --paper-font-title;
   }
 
+  .secondary {
+    color: var(--secondary-text-color);
+  }
+
+  .error {
+    color: var(--google-red-500);
+  }
+
+  .warning {
+    color: var(--google-red-500);
+  }
+
+  mwc-button.warning {
+    --mdc-theme-primary: var(--google-red-500);
+  }
+
   button.link {
     background: none;
     color: inherit;
@@ -160,8 +176,10 @@ export const haStyleDialog = css`
     padding: 8px;
   }
 
-  .paper-dialog-buttons .warning {
-    --mdc-theme-primary: var(--google-red-500);
+  @media all and (min-width: 450px) {
+    ha-paper-dialog {
+      min-width: 400px;
+    }
   }
 
   @media all and (max-width: 450px), all and (max-height: 500px) {