Fix area dialog too wide (#5136)

* Fix area dialog to wide

* Update styles

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;
         }

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);
-        }
       `,
     ];
   }

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 {
+  @media all and (min-width: 450px) {
-    --mdc-theme-primary: var(--google-red-500);
+    ha-paper-dialog {
+      min-width: 400px;
+    }
   }
 
   @media all and (max-width: 450px), all and (max-height: 500px) {