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

This commit is contained in:
Bram Kragten 2020-01-30 17:18:27 +01:00 committed by GitHub
parent 2e25db4d1b
commit 1912bda60d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 18 deletions

View File

@ -53,13 +53,14 @@ class HassSubpage extends LitElement {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
height: 64px; height: 65px;
padding: 0 16px; padding: 0 16px;
pointer-events: none; pointer-events: none;
background-color: var(--app-header-background-color); background-color: var(--app-header-background-color);
font-weight: 400; font-weight: 400;
color: var(--app-header-text-color, white); color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none); border-bottom: var(--app-header-border-bottom, none);
box-sizing: border-box;
} }
ha-menu-button, ha-menu-button,
@ -81,7 +82,7 @@ class HassSubpage extends LitElement {
.content { .content {
position: relative; position: relative;
width: 100%; width: 100%;
height: calc(100% - 64px); height: calc(100% - 65px);
overflow-y: auto; overflow-y: auto;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

View File

@ -337,18 +337,14 @@ class CloudAlexa extends LitElement {
padding: 0 8px; padding: 0 8px;
} }
.content { .content {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
padding: 4px; grid-gap: 8px 8px;
padding: 8px;
} }
ha-switch { ha-switch {
clear: both; clear: both;
} }
ha-card {
margin: 4px;
width: 300px;
flex-grow: 1;
}
.card-content { .card-content {
padding-bottom: 12px; padding-bottom: 12px;
} }

View File

@ -363,14 +363,10 @@ class CloudGoogleAssistant extends LitElement {
padding: 0 8px; padding: 0 8px;
} }
.content { .content {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
padding: 4px; grid-gap: 8px 8px;
} padding: 8px;
ha-card {
margin: 4px;
width: 300px;
flex-grow: 1;
} }
.card-content { .card-content {
padding-bottom: 12px; padding-bottom: 12px;