Fix flex issues on google and alexa settings page (#4674)

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;

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

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;