From 1912bda60daf889886fdc9f968b40335709f8851 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 30 Jan 2020 17:18:27 +0100
Subject: [PATCH] Fix flex issues on google and alexa settings page (#4674)

---
 src/layouts/hass-subpage.ts                          |  5 +++--
 src/panels/config/cloud/alexa/cloud-alexa.ts         | 12 ++++--------
 .../cloud/google-assistant/cloud-google-assistant.ts | 12 ++++--------
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index 39c539d7ee..827828fedd 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -53,13 +53,14 @@ class HassSubpage extends LitElement {
         display: flex;
         align-items: center;
         font-size: 20px;
-        height: 64px;
+        height: 65px;
         padding: 0 16px;
         pointer-events: none;
         background-color: var(--app-header-background-color);
         font-weight: 400;
         color: var(--app-header-text-color, white);
         border-bottom: var(--app-header-border-bottom, none);
+        box-sizing: border-box;
       }
 
       ha-menu-button,
@@ -81,7 +82,7 @@ class HassSubpage extends LitElement {
       .content {
         position: relative;
         width: 100%;
-        height: calc(100% - 64px);
+        height: calc(100% - 65px);
         overflow-y: auto;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
diff --git a/src/panels/config/cloud/alexa/cloud-alexa.ts b/src/panels/config/cloud/alexa/cloud-alexa.ts
index 84008711d8..d1980bcea6 100644
--- a/src/panels/config/cloud/alexa/cloud-alexa.ts
+++ b/src/panels/config/cloud/alexa/cloud-alexa.ts
@@ -337,18 +337,14 @@ class CloudAlexa extends LitElement {
         padding: 0 8px;
       }
       .content {
-        display: flex;
-        flex-wrap: wrap;
-        padding: 4px;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        grid-gap: 8px 8px;
+        padding: 8px;
       }
       ha-switch {
         clear: both;
       }
-      ha-card {
-        margin: 4px;
-        width: 300px;
-        flex-grow: 1;
-      }
       .card-content {
         padding-bottom: 12px;
       }
diff --git a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
index 65f26ee711..d964d152f0 100644
--- a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
+++ b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
@@ -363,14 +363,10 @@ class CloudGoogleAssistant extends LitElement {
         padding: 0 8px;
       }
       .content {
-        display: flex;
-        flex-wrap: wrap;
-        padding: 4px;
-      }
-      ha-card {
-        margin: 4px;
-        width: 300px;
-        flex-grow: 1;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        grid-gap: 8px 8px;
+        padding: 8px;
       }
       .card-content {
         padding-bottom: 12px;