From 64366dc99a9447c5925d75bee95d4758bf467c5c Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Mon, 30 Sep 2019 14:27:19 -0500
Subject: [PATCH] fix alignment of switches positioned absolutely (#3812)

* fix alignment of switches positioned absolutely

* wrap switches

* remove !important
---
 .../config/cloud/account/cloud-alexa-pref.ts       | 12 +++++++-----
 .../config/cloud/account/cloud-google-pref.ts      | 14 ++++++++------
 .../config/cloud/account/cloud-remote-pref.ts      | 12 +++++++-----
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/panels/config/cloud/account/cloud-alexa-pref.ts b/src/panels/config/cloud/account/cloud-alexa-pref.ts
index ab8c787b6a..53f97f4394 100644
--- a/src/panels/config/cloud/account/cloud-alexa-pref.ts
+++ b/src/panels/config/cloud/account/cloud-alexa-pref.ts
@@ -32,10 +32,12 @@ export class CloudAlexaPref extends LitElement {
 
     return html`
       <ha-card header="Alexa">
-        <ha-switch
-          .checked=${alexa_enabled}
-          @change=${this._enabledToggleChanged}
-        ></ha-switch>
+        <div class="switch">
+          <ha-switch
+            .checked=${alexa_enabled}
+            @change=${this._enabledToggleChanged}
+          ></ha-switch>
+        </div>
         <div class="card-content">
           With the Alexa integration for Home Assistant Cloud you'll be able to
           control all your Home Assistant devices via any Alexa-enabled device.
@@ -133,7 +135,7 @@ export class CloudAlexaPref extends LitElement {
       a {
         color: var(--primary-color);
       }
-      ha-card > ha-switch {
+      .switch {
         margin: -4px 0;
         position: absolute;
         right: 8px;
diff --git a/src/panels/config/cloud/account/cloud-google-pref.ts b/src/panels/config/cloud/account/cloud-google-pref.ts
index 102bb513c0..0a3b154d34 100644
--- a/src/panels/config/cloud/account/cloud-google-pref.ts
+++ b/src/panels/config/cloud/account/cloud-google-pref.ts
@@ -43,11 +43,13 @@ export class CloudGooglePref extends LitElement {
 
     return html`
       <ha-card header="Google Assistant">
-        <ha-switch
-          id="google_enabled"
-          .checked="${google_enabled}"
-          @change="${this._toggleChanged}"
-        ></ha-switch>
+        <div class="switch">
+          <ha-switch
+            id="google_enabled"
+            .checked="${google_enabled}"
+            @change="${this._toggleChanged}"
+          ></ha-switch>
+        </div>
         <div class="card-content">
           With the Google Assistant integration for Home Assistant Cloud you'll
           be able to control all your Home Assistant devices via any Google
@@ -138,7 +140,7 @@ export class CloudGooglePref extends LitElement {
       a {
         color: var(--primary-color);
       }
-      ha-card > ha-switch {
+      .switch {
         margin: -4px 0;
         position: absolute;
         right: 8px;
diff --git a/src/panels/config/cloud/account/cloud-remote-pref.ts b/src/panels/config/cloud/account/cloud-remote-pref.ts
index 3d54ff8fbf..b349cabd4e 100644
--- a/src/panels/config/cloud/account/cloud-remote-pref.ts
+++ b/src/panels/config/cloud/account/cloud-remote-pref.ts
@@ -59,10 +59,12 @@ export class CloudRemotePref extends LitElement {
 
     return html`
       <ha-card header="Remote Control">
-        <ha-switch
-          .checked="${remote_connected}"
-          @change="${this._toggleChanged}"
-        ></ha-switch>
+        <div class="switch">
+          <ha-switch
+            .checked="${remote_connected}"
+            @change="${this._toggleChanged}"
+          ></ha-switch>
+        </div>
         <div class="card-content">
           Home Assistant Cloud provides a secure remote connection to your
           instance while away from home. Your instance
@@ -118,7 +120,7 @@ export class CloudRemotePref extends LitElement {
       a {
         color: var(--primary-color);
       }
-      ha-card > ha-switch {
+      .switch {
         margin: -4px 0;
         position: absolute;
         right: 8px;