diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template
index 09a6e7b514..adcae133fb 100644
--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
@@ -68,7 +68,7 @@
}
#ha-launch-screen .ha-launch-screen-spacer-top {
flex: 1;
- margin-top: calc( 2 * max(var(--safe-area-inset-bottom), 48px) + 46px );
+ margin-top: calc( 2 * max(env(safe-area-inset-bottom), 48px) + 46px );
padding-top: 48px;
}
#ha-launch-screen .ha-launch-screen-spacer-bottom {
@@ -76,7 +76,7 @@
padding-top: 48px;
}
.ohf-logo {
- margin: max(var(--safe-area-inset-bottom), 48px) 0;
+ margin: max(env(safe-area-inset-bottom), 48px) 0;
display: flex;
flex-direction: column;
align-items: center;
diff --git a/hassio/src/dashboard/hassio-dashboard.ts b/hassio/src/dashboard/hassio-dashboard.ts
index 4cbf3c97b4..531f171541 100644
--- a/hassio/src/dashboard/hassio-dashboard.ts
+++ b/hassio/src/dashboard/hassio-dashboard.ts
@@ -132,9 +132,9 @@ class HassioDashboard extends LitElement {
}
ha-fab.non-tabs {
position: fixed;
- right: calc(16px + var(--safe-area-inset-right));
- bottom: calc(16px + var(--safe-area-inset-bottom));
- inset-inline-end: calc(16px + var(--safe-area-inset-right));
+ right: calc(16px + env(safe-area-inset-right));
+ bottom: calc(16px + env(safe-area-inset-bottom));
+ inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
z-index: 1;
}
diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts
index d30df0f396..5678b57ee7 100644
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@@ -616,7 +616,7 @@ export class DialogHassioNetwork
display: flex;
justify-content: space-between;
padding: 8px;
- padding-bottom: max(var(--safe-area-inset-bottom), 8px);
+ padding-bottom: max(env(safe-area-inset-bottom), 8px);
background-color: var(--mdc-theme-surface, #fff);
}
.warning {
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 20a91e2621..e326e6b19b 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -90,7 +90,7 @@ export class HaDialog extends DialogBase {
}
.mdc-dialog__actions {
justify-content: var(--justify-action-buttons, flex-end);
- padding-bottom: max(var(--safe-area-inset-bottom), 24px);
+ padding-bottom: max(env(safe-area-inset-bottom), 24px);
}
.mdc-dialog__actions span:nth-child(1) {
flex: var(--secondary-action-button-flex, unset);
@@ -120,7 +120,7 @@ export class HaDialog extends DialogBase {
:host([hideactions]) .mdc-dialog .mdc-dialog__content {
padding-bottom: max(
var(--dialog-content-padding, 24px),
- var(--safe-area-inset-bottom)
+ env(safe-area-inset-bottom)
);
}
.mdc-dialog .mdc-dialog__surface {
diff --git a/src/components/ha-md-dialog.ts b/src/components/ha-md-dialog.ts
index 99d830b5b0..06adb5ad6d 100644
--- a/src/components/ha-md-dialog.ts
+++ b/src/components/ha-md-dialog.ts
@@ -167,10 +167,10 @@ export class HaMdDialog extends MdDialog {
@media all and (max-width: 450px), all and (max-height: 500px) {
:host(:not([type="alert"])) {
min-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
max-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
min-height: 100%;
max-height: 100%;
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 5bf143addc..680bd37d7f 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -875,12 +875,12 @@ class HaSidebar extends SubscribeMixin(LitElement) {
);
font-size: 20px;
align-items: center;
- padding-left: calc(4px + var(--safe-area-inset-left));
- padding-inline-start: calc(4px + var(--safe-area-inset-left));
+ padding-left: calc(4px + env(safe-area-inset-left));
+ padding-inline-start: calc(4px + env(safe-area-inset-left));
padding-inline-end: initial;
}
:host([expanded]) .menu {
- width: calc(256px + var(--safe-area-inset-left));
+ width: calc(256px + env(safe-area-inset-left));
}
.menu ha-icon-button {
color: var(--sidebar-icon-color);
@@ -917,12 +917,12 @@ class HaSidebar extends SubscribeMixin(LitElement) {
box-sizing: border-box;
height: calc(100% - var(--header-height) - 132px);
height: calc(
- 100% - var(--header-height) - 132px - var(--safe-area-inset-bottom)
+ 100% - var(--header-height) - 132px - env(safe-area-inset-bottom)
);
overflow-x: hidden;
background: none;
- margin-left: var(--safe-area-inset-left);
- margin-inline-start: var(--safe-area-inset-left);
+ margin-left: env(safe-area-inset-left);
+ margin-inline-start: env(safe-area-inset-left);
margin-inline-end: initial;
}
@@ -1022,8 +1022,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
.notifications-container,
.configuration-container {
display: flex;
- margin-left: var(--safe-area-inset-left);
- margin-inline-start: var(--safe-area-inset-left);
+ margin-left: env(safe-area-inset-left);
+ margin-inline-start: env(safe-area-inset-left);
margin-inline-end: initial;
}
.notifications {
@@ -1034,8 +1034,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
flex: 1;
}
.profile {
- margin-left: var(--safe-area-inset-left);
- margin-inline-start: var(--safe-area-inset-left);
+ margin-left: env(safe-area-inset-left);
+ margin-inline-start: env(safe-area-inset-left);
margin-inline-end: initial;
}
.profile paper-icon-item {
diff --git a/src/components/ha-toast.ts b/src/components/ha-toast.ts
index 8fd2dffae2..f0f94cbea4 100644
--- a/src/components/ha-toast.ts
+++ b/src/components/ha-toast.ts
@@ -14,9 +14,9 @@ export class HaToast extends Snackbar {
.mdc-snackbar {
margin: 8px;
- right: calc(8px + var(--safe-area-inset-right));
- bottom: calc(8px + var(--safe-area-inset-bottom));
- left: calc(8px + var(--safe-area-inset-left));
+ right: calc(8px + env(safe-area-inset-right));
+ bottom: calc(8px + env(safe-area-inset-bottom));
+ left: calc(8px + env(safe-area-inset-left));
}
.mdc-snackbar__surface {
@@ -33,9 +33,9 @@ export class HaToast extends Snackbar {
@media all and (max-width: 450px), all and (max-height: 500px) {
.mdc-snackbar {
- right: var(--safe-area-inset-right);
- bottom: var(--safe-area-inset-bottom);
- left: var(--safe-area-inset-left);
+ right: env(safe-area-inset-right);
+ bottom: env(safe-area-inset-bottom);
+ left: env(safe-area-inset-left);
}
.mdc-snackbar__surface {
min-width: 100%;
diff --git a/src/dialogs/more-info/controls/more-info-update.ts b/src/dialogs/more-info/controls/more-info-update.ts
index 92aa130012..206789552e 100644
--- a/src/dialogs/more-info/controls/more-info-update.ts
+++ b/src/dialogs/more-info/controls/more-info-update.ts
@@ -434,8 +434,8 @@ class MoreInfoUpdate extends LitElement {
position: sticky;
bottom: 0;
margin: 0 -24px 0 -24px;
- margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px));
- padding-bottom: var(--safe-area-inset-bottom);
+ margin-bottom: calc(-1 * max(env(safe-area-inset-bottom), 24px));
+ padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
display: flex;
flex-direction: column;
diff --git a/src/dialogs/more-info/ha-more-info-info.ts b/src/dialogs/more-info/ha-more-info-info.ts
index bc2ba2f559..a87d3d06f8 100644
--- a/src/dialogs/more-info/ha-more-info-info.ts
+++ b/src/dialogs/more-info/ha-more-info-info.ts
@@ -128,7 +128,7 @@ export class MoreInfoInfo extends LitElement {
flex-direction: column;
flex: 1;
padding: 24px;
- padding-bottom: max(var(--safe-area-inset-bottom), 24px);
+ padding-bottom: max(env(safe-area-inset-bottom), 24px);
}
[data-domain="camera"] .content {
diff --git a/src/dialogs/notifications/notification-drawer.ts b/src/dialogs/notifications/notification-drawer.ts
index bbb41039eb..a3c83bcd69 100644
--- a/src/dialogs/notifications/notification-drawer.ts
+++ b/src/dialogs/notifications/notification-drawer.ts
@@ -159,11 +159,11 @@ export class HuiNotificationDrawer extends LitElement {
.notifications {
overflow-y: auto;
padding-top: 16px;
- padding-left: var(--safe-area-inset-left);
- padding-right: var(--safe-area-inset-right);
- padding-inline-start: var(--safe-area-inset-left);
- padding-inline-end: var(--safe-area-inset-right);
- padding-bottom: var(--safe-area-inset-bottom);
+ padding-left: env(safe-area-inset-left);
+ padding-right: env(safe-area-inset-right);
+ padding-inline-start: env(safe-area-inset-left);
+ padding-inline-end: env(safe-area-inset-right);
+ padding-bottom: env(safe-area-inset-bottom);
height: calc(100% - 1px - var(--header-height));
box-sizing: border-box;
background-color: var(--primary-background-color);
diff --git a/src/html/index.html.template b/src/html/index.html.template
index 7ebaf349e6..6c2aac0bdf 100644
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -44,7 +44,7 @@
}
#ha-launch-screen .ha-launch-screen-spacer-top {
flex: 1;
- margin-top: calc( 2 * max(var(--safe-area-inset-bottom), 48px) + 46px );
+ margin-top: calc( 2 * max(env(safe-area-inset-bottom), 48px) + 46px );
padding-top: 48px;
}
#ha-launch-screen .ha-launch-screen-spacer-bottom {
@@ -52,7 +52,7 @@
padding-top: 48px;
}
.ohf-logo {
- margin: max(var(--safe-area-inset-bottom), 48px) 0;
+ margin: max(env(safe-area-inset-bottom), 48px) 0;
display: flex;
flex-direction: column;
align-items: center;
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index b11215f7ad..2c411b0478 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -148,10 +148,10 @@ class HassSubpage extends LitElement {
#fab {
position: absolute;
- right: calc(16px + var(--safe-area-inset-right));
- inset-inline-end: calc(16px + var(--safe-area-inset-right));
+ right: calc(16px + env(safe-area-inset-right));
+ inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
- bottom: calc(16px + var(--safe-area-inset-bottom));
+ bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 1;
display: flex;
flex-wrap: wrap;
@@ -159,7 +159,7 @@ class HassSubpage extends LitElement {
gap: 8px;
}
:host([narrow]) #fab.tabs {
- bottom: calc(84px + var(--safe-area-inset-bottom));
+ bottom: calc(84px + env(safe-area-inset-bottom));
}
#fab[is-wide] {
bottom: 24px;
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 7c4eb6dfef..db63c30c7c 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -903,10 +903,10 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
ha-dialog {
--mdc-dialog-min-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 8881407b9f..ca930a01b5 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -280,7 +280,7 @@ class HassTabsSubpage extends LitElement {
z-index: 2;
font-size: 12px;
width: 100%;
- padding-bottom: var(--safe-area-inset-bottom);
+ padding-bottom: env(safe-area-inset-bottom);
}
#tabbar:not(.bottom-bar) {
@@ -312,12 +312,12 @@ class HassTabsSubpage extends LitElement {
.content {
position: relative;
width: calc(
- 100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)
+ 100% - env(safe-area-inset-left) - env(safe-area-inset-right)
);
- margin-left: var(--safe-area-inset-left);
- margin-right: var(--safe-area-inset-right);
- margin-inline-start: var(--safe-area-inset-left);
- margin-inline-end: var(--safe-area-inset-right);
+ margin-left: env(safe-area-inset-left);
+ margin-right: env(safe-area-inset-right);
+ margin-inline-start: env(safe-area-inset-left);
+ margin-inline-end: env(safe-area-inset-right);
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@@ -325,23 +325,23 @@ class HassTabsSubpage extends LitElement {
:host([narrow]) .content {
height: calc(100% - var(--header-height));
height: calc(
- 100% - var(--header-height) - var(--safe-area-inset-bottom)
+ 100% - var(--header-height) - env(safe-area-inset-bottom)
);
}
:host([narrow]) .content.tabs {
height: calc(100% - 2 * var(--header-height));
height: calc(
- 100% - 2 * var(--header-height) - var(--safe-area-inset-bottom)
+ 100% - 2 * var(--header-height) - env(safe-area-inset-bottom)
);
}
#fab {
position: fixed;
- right: calc(16px + var(--safe-area-inset-right));
- inset-inline-end: calc(16px + var(--safe-area-inset-right));
+ right: calc(16px + env(safe-area-inset-right));
+ inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
- bottom: calc(16px + var(--safe-area-inset-bottom));
+ bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 1;
display: flex;
flex-wrap: wrap;
@@ -349,7 +349,7 @@ class HassTabsSubpage extends LitElement {
gap: 8px;
}
:host([narrow]) #fab.tabs {
- bottom: calc(84px + var(--safe-area-inset-bottom));
+ bottom: calc(84px + env(safe-area-inset-bottom));
}
#fab[is-wide] {
bottom: 24px;
diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index 3d0586248a..831ac020c8 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -172,7 +172,7 @@ export class HomeAssistantMain extends LitElement {
--mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
}
:host([expanded]) {
- --mdc-drawer-width: calc(256px + var(--safe-area-inset-left));
+ --mdc-drawer-width: calc(256px + env(safe-area-inset-left));
}
:host([modal]) {
--mdc-drawer-width: unset;
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index 5b0bc9aaf7..77ab99ab88 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -1098,7 +1098,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
}
ha-fab {
position: relative;
- bottom: calc(-80px - var(--safe-area-inset-bottom));
+ bottom: calc(-80px - env(safe-area-inset-bottom));
transition: bottom 0.3s;
}
ha-fab.dirty {
diff --git a/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts b/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts
index 583f6c6d57..c140713aba 100644
--- a/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts
+++ b/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts
@@ -122,7 +122,7 @@ class HaBackupOverviewBackups extends LitElement {
gap: 24px;
display: flex;
flex-direction: column;
- margin-bottom: calc(72px + var(--safe-area-inset-bottom));
+ margin-bottom: calc(72px + env(safe-area-inset-bottom));
}
.card-actions {
display: flex;
diff --git a/src/panels/config/core/ha-config-section-updates.ts b/src/panels/config/core/ha-config-section-updates.ts
index 8fd085e024..a79c1693f6 100644
--- a/src/panels/config/core/ha-config-section-updates.ts
+++ b/src/panels/config/core/ha-config-section-updates.ts
@@ -195,7 +195,7 @@ class HaConfigSectionUpdates extends LitElement {
justify-content: space-between;
flex-direction: column;
display: flex;
- margin-bottom: max(24px, var(--safe-area-inset-bottom));
+ margin-bottom: max(24px, env(safe-area-inset-bottom));
}
.card-content {
diff --git a/src/panels/config/core/ha-config-system-navigation.ts b/src/panels/config/core/ha-config-system-navigation.ts
index 36e256c4f7..3f6675e5b1 100644
--- a/src/panels/config/core/ha-config-system-navigation.ts
+++ b/src/panels/config/core/ha-config-system-navigation.ts
@@ -223,7 +223,7 @@ class HaConfigSystemNavigation extends LitElement {
haStyle,
css`
:host(:not([narrow])) ha-card {
- margin-bottom: max(24px, var(--safe-area-inset-bottom));
+ margin-bottom: max(24px, env(safe-area-inset-bottom));
}
ha-config-section {
@@ -235,7 +235,7 @@ class HaConfigSystemNavigation extends LitElement {
ha-card {
overflow: hidden;
margin-bottom: 24px;
- margin-bottom: max(24px, var(--safe-area-inset-bottom));
+ margin-bottom: max(24px, env(safe-area-inset-bottom));
}
ha-card a {
diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts
index da2bbfbea5..726434b6de 100644
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/src/panels/config/dashboard/ha-config-dashboard.ts
@@ -363,10 +363,10 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
haStyle,
css`
ha-card:last-child {
- margin-bottom: var(--safe-area-inset-bottom);
+ margin-bottom: env(safe-area-inset-bottom);
}
:host(:not([narrow])) ha-card:last-child {
- margin-bottom: max(24px, var(--safe-area-inset-bottom));
+ margin-bottom: max(24px, env(safe-area-inset-bottom));
}
ha-config-section {
margin: auto;
@@ -401,7 +401,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
}
ha-tip {
- margin-bottom: max(var(--safe-area-inset-bottom), 8px);
+ margin-bottom: max(env(safe-area-inset-bottom), 8px);
}
.new {
diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
index 6e4069db84..dd6d6a2c52 100644
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
@@ -240,10 +240,10 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
}
}
diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts
index eb4213132e..26dc31f7a4 100644
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/src/panels/config/entities/entity-registry-settings.ts
@@ -253,7 +253,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
display: flex;
padding: 8px 16px 8px 24px;
justify-content: space-between;
- padding-bottom: max(var(--safe-area-inset-bottom), 8px);
+ padding-bottom: max(env(safe-area-inset-bottom), 8px);
background-color: var(--mdc-theme-surface, #fff);
border-top: 1px solid var(--divider-color);
position: sticky;
diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts
index 1ae60fc7fc..7823c48a5d 100644
--- a/src/panels/config/info/ha-config-info.ts
+++ b/src/panels/config/info/ha-config-info.ts
@@ -322,7 +322,7 @@ class HaConfigInfo extends LitElement {
}
.pages {
- margin-bottom: max(24px, var(--safe-area-inset-bottom));
+ margin-bottom: max(24px, env(safe-area-inset-bottom));
padding: 4px 0;
}
diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts
index 44649761ed..b4ce0b7e68 100644
--- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts
+++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts
@@ -222,10 +222,10 @@ class DialogMatterAddDevice extends LitElement {
}
ha-dialog {
--mdc-dialog-min-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
}
}
diff --git a/src/panels/config/repairs/ha-config-repairs-dashboard.ts b/src/panels/config/repairs/ha-config-repairs-dashboard.ts
index f9bc1d393d..5aabf9a51c 100644
--- a/src/panels/config/repairs/ha-config-repairs-dashboard.ts
+++ b/src/panels/config/repairs/ha-config-repairs-dashboard.ts
@@ -182,7 +182,7 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
justify-content: space-between;
flex-direction: column;
display: flex;
- margin-bottom: max(24px, var(--safe-area-inset-bottom));
+ margin-bottom: max(24px, env(safe-area-inset-bottom));
}
.card-content {
diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts
index 77a8cb2d2a..36f0d1fb8a 100644
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@@ -1254,7 +1254,7 @@ export class HaSceneEditor extends PreventUnsavedMixin(
}
ha-fab {
position: relative;
- bottom: calc(-80px - var(--safe-area-inset-bottom));
+ bottom: calc(-80px - env(safe-area-inset-bottom));
transition: bottom 0.3s;
}
ha-alert {
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index ce65e33f45..11e50a36ba 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -1066,7 +1066,7 @@ export class HaScriptEditor extends SubscribeMixin(
}
ha-fab {
position: relative;
- bottom: calc(-80px - var(--safe-area-inset-bottom));
+ bottom: calc(-80px - env(safe-area-inset-bottom));
transition: bottom 0.3s;
}
ha-fab.dirty {
diff --git a/src/panels/config/voice-assistants/dialog-expose-entity.ts b/src/panels/config/voice-assistants/dialog-expose-entity.ts
index 2d3efd77ac..d8b523c7ef 100644
--- a/src/panels/config/voice-assistants/dialog-expose-entity.ts
+++ b/src/panels/config/voice-assistants/dialog-expose-entity.ts
@@ -235,10 +235,10 @@ class DialogExposeEntity extends LitElement {
@media all and (max-width: 500px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;
diff --git a/src/panels/config/zone/dialog-home-zone-detail.ts b/src/panels/config/zone/dialog-home-zone-detail.ts
index d82eee00b6..0a25f8d713 100644
--- a/src/panels/config/zone/dialog-home-zone-detail.ts
+++ b/src/panels/config/zone/dialog-home-zone-detail.ts
@@ -130,7 +130,7 @@ class DialogHomeZoneDetail extends LitElement {
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
}
}
diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts
index 00e3698e1d..065d1e5149 100644
--- a/src/panels/config/zone/dialog-zone-detail.ts
+++ b/src/panels/config/zone/dialog-zone-detail.ts
@@ -215,7 +215,7 @@ class DialogZoneDetail extends LitElement {
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
}
}
diff --git a/src/panels/developer-tools/action/developer-tools-action.ts b/src/panels/developer-tools/action/developer-tools-action.ts
index 6bf3b34104..30047c43b8 100644
--- a/src/panels/developer-tools/action/developer-tools-action.ts
+++ b/src/panels/developer-tools/action/developer-tools-action.ts
@@ -597,19 +597,19 @@ class HaPanelDevAction extends LitElement {
css`
.content {
padding: 16px;
- padding: max(16px, var(--safe-area-inset-top))
- max(16px, var(--safe-area-inset-right))
- max(16px, var(--safe-area-inset-bottom))
- max(16px, var(--safe-area-inset-left));
+ padding: max(16px, env(safe-area-inset-top))
+ max(16px, env(safe-area-inset-right))
+ max(16px, env(safe-area-inset-bottom))
+ max(16px, env(safe-area-inset-left));
max-width: 1200px;
margin: auto;
}
.button-row {
padding: 8px 16px;
- padding: max(8px, var(--safe-area-inset-top))
- max(16px, var(--safe-area-inset-right))
- max(8px, var(--safe-area-inset-bottom))
- max(16px, var(--safe-area-inset-left));
+ padding: max(8px, env(safe-area-inset-top))
+ max(16px, env(safe-area-inset-right))
+ max(8px, env(safe-area-inset-bottom))
+ max(16px, env(safe-area-inset-left));
border-top: 1px solid var(--divider-color);
border-bottom: 1px solid var(--divider-color);
background: var(--card-background-color);
diff --git a/src/panels/developer-tools/assist/developer-tools-assist.ts b/src/panels/developer-tools/assist/developer-tools-assist.ts
index 35b93daa6b..a10e169ea2 100644
--- a/src/panels/developer-tools/assist/developer-tools-assist.ts
+++ b/src/panels/developer-tools/assist/developer-tools-assist.ts
@@ -235,10 +235,10 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
css`
.content {
padding: 28px 20px 16px;
- padding: max(28px, calc(12px + var(--safe-area-inset-top)))
- max(20px, calc(4px + var(--safe-area-inset-right)))
- max(16px, var(--safe-area-inset-bottom))
- max(20px, calc(4px + var(--safe-area-inset-left)));
+ padding: max(28px, calc(12px + env(safe-area-inset-top)))
+ max(20px, calc(4px + env(safe-area-inset-right)))
+ max(16px, env(safe-area-inset-bottom))
+ max(20px, calc(4px + env(safe-area-inset-left)));
max-width: 1040px;
margin: 0 auto;
}
diff --git a/src/panels/developer-tools/event/developer-tools-event.ts b/src/panels/developer-tools/event/developer-tools-event.ts
index c31af58dcd..abad0c3701 100644
--- a/src/panels/developer-tools/event/developer-tools-event.ts
+++ b/src/panels/developer-tools/event/developer-tools-event.ts
@@ -148,10 +148,10 @@ class HaPanelDevEvent extends LitElement {
.content {
gap: 16px;
padding: 16px;
- padding: max(16px, var(--safe-area-inset-top))
- max(16px, var(--safe-area-inset-right))
- max(16px, var(--safe-area-inset-bottom))
- max(16px, var(--safe-area-inset-left));
+ padding: max(16px, env(safe-area-inset-top))
+ max(16px, env(safe-area-inset-right))
+ max(16px, env(safe-area-inset-bottom))
+ max(16px, env(safe-area-inset-left));
max-width: 1200px;
margin: auto;
}
diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
index 23f60a59c5..23b299cfcd 100644
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -127,7 +127,7 @@ class PanelDeveloperTools extends LitElement {
z-index: 4;
background-color: var(--app-header-background-color);
width: var(--mdc-top-app-bar-width, 100%);
- padding-top: var(--safe-area-inset-top);
+ padding-top: env(safe-area-inset-top);
color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none);
-webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
@@ -155,17 +155,17 @@ class PanelDeveloperTools extends LitElement {
developer-tools-router {
display: block;
padding-top: calc(
- var(--header-height) + 48px + var(--safe-area-inset-top)
+ var(--header-height) + 48px + env(safe-area-inset-top)
);
- padding-bottom: calc(var(--safe-area-inset-bottom));
+ padding-bottom: calc(env(safe-area-inset-bottom));
flex: 1 1 100%;
max-width: 100%;
}
paper-tabs {
- margin-left: max(var(--safe-area-inset-left), 24px);
- margin-right: max(var(--safe-area-inset-right), 24px);
- margin-inline-start: max(var(--safe-area-inset-left), 24px);
- margin-inline-end: max(var(--safe-area-inset-right), 24px);
+ margin-left: max(env(safe-area-inset-left), 24px);
+ margin-right: max(env(safe-area-inset-right), 24px);
+ margin-inline-start: max(env(safe-area-inset-left), 24px);
+ margin-inline-end: max(env(safe-area-inset-right), 24px);
--paper-tabs-selection-bar-color: var(
--app-header-selection-bar-color,
var(--app-header-text-color, #fff)
diff --git a/src/panels/developer-tools/state/developer-tools-state.ts b/src/panels/developer-tools/state/developer-tools-state.ts
index c119091a73..3137674b23 100644
--- a/src/panels/developer-tools/state/developer-tools-state.ts
+++ b/src/panels/developer-tools/state/developer-tools-state.ts
@@ -576,10 +576,10 @@ class HaPanelDevState extends LitElement {
-moz-user-select: initial;
display: block;
padding: 16px;
- padding: max(16px, var(--safe-area-inset-top))
- max(16px, var(--safe-area-inset-right))
- max(16px, var(--safe-area-inset-bottom))
- max(16px, var(--safe-area-inset-left));
+ padding: max(16px, env(safe-area-inset-top))
+ max(16px, env(safe-area-inset-right))
+ max(16px, env(safe-area-inset-bottom))
+ max(16px, env(safe-area-inset-left));
}
ha-textfield {
diff --git a/src/panels/developer-tools/statistics/developer-tools-statistics.ts b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
index 0e09a412c0..ac06d1fc9b 100644
--- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts
+++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
@@ -792,10 +792,10 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
ha-dialog {
--mdc-dialog-min-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;
diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index 3d24a0037c..f394112de7 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -276,18 +276,18 @@ ${type === "object"
.content {
gap: 16px;
padding: 16px;
- padding: max(16px, var(--safe-area-inset-top))
- max(16px, var(--safe-area-inset-right))
- max(16px, var(--safe-area-inset-bottom))
- max(16px, var(--safe-area-inset-left));
+ padding: max(16px, env(safe-area-inset-top))
+ max(16px, env(safe-area-inset-right))
+ max(16px, env(safe-area-inset-bottom))
+ max(16px, env(safe-area-inset-left));
}
.content.horizontal {
--code-mirror-max-height: calc(
100vh - var(--header-height) -
(var(--paper-font-body1_-_line-height) * 3) - (1em * 2) -
- (max(16px, var(--safe-area-inset-top)) * 2) -
- (max(16px, var(--safe-area-inset-bottom)) * 2) -
+ (max(16px, env(safe-area-inset-top)) * 2) -
+ (max(16px, env(safe-area-inset-bottom)) * 2) -
(var(--ha-card-border-width, 1px) * 2) - 179px
);
}
diff --git a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
index af51b6d931..906228308b 100644
--- a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
+++ b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
@@ -250,10 +250,10 @@ export class DeveloperYamlConfig extends LitElement {
.content {
padding: 28px 20px 16px;
- padding: max(28px, calc(12px + var(--safe-area-inset-top)))
- max(20px, calc(4px + var(--safe-area-inset-right)))
- max(16px, var(--safe-area-inset-bottom))
- max(20px, calc(4px + var(--safe-area-inset-left)));
+ padding: max(28px, calc(12px + env(safe-area-inset-top)))
+ max(20px, calc(4px + env(safe-area-inset-right)))
+ max(16px, env(safe-area-inset-bottom))
+ max(20px, calc(4px + env(safe-area-inset-left)));
max-width: 1040px;
margin: 0 auto;
}
diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
index 797702a8d8..f8f15aeb49 100644
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@@ -382,7 +382,7 @@ class PanelEnergy extends LitElement {
position: fixed;
top: 0;
width: var(--mdc-top-app-bar-width, 100%);
- padding-top: var(--safe-area-inset-top);
+ padding-top: env(safe-area-inset-top);
z-index: 4;
transition: box-shadow 200ms linear;
display: flex;
@@ -423,12 +423,12 @@ class PanelEnergy extends LitElement {
display: flex;
min-height: 100vh;
box-sizing: border-box;
- padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
- padding-left: var(--safe-area-inset-left);
- padding-right: var(--safe-area-inset-right);
- padding-inline-start: var(--safe-area-inset-left);
- padding-inline-end: var(--safe-area-inset-right);
- padding-bottom: var(--safe-area-inset-bottom);
+ padding-top: calc(var(--header-height) + env(safe-area-inset-top));
+ padding-left: env(safe-area-inset-left);
+ padding-right: env(safe-area-inset-right);
+ padding-inline-start: env(safe-area-inset-left);
+ padding-inline-end: env(safe-area-inset-right);
+ padding-bottom: env(safe-area-inset-bottom);
}
hui-view {
flex: 1 1 100%;
diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts
index 313529a5a7..cc59c9342f 100644
--- a/src/panels/history/ha-panel-history.ts
+++ b/src/panels/history/ha-panel-history.ts
@@ -625,7 +625,7 @@ class HaPanelHistory extends LitElement {
.content {
padding: 0 16px 16px;
- padding-bottom: max(var(--safe-area-inset-bottom), 16px);
+ padding-bottom: max(env(safe-area-inset-bottom), 16px);
}
:host([virtualize]) {
diff --git a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
index 35c5623180..a63d3e3a50 100644
--- a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
+++ b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
@@ -177,15 +177,15 @@ export class HuiUnusedEntities extends LitElement {
.fab {
position: sticky;
float: var(--float-end);
- right: calc(16px + var(--safe-area-inset-right));
- bottom: calc(16px + var(--safe-area-inset-bottom));
- inset-inline-end: calc(16px + var(--safe-area-inset-right));
+ right: calc(16px + env(safe-area-inset-right));
+ bottom: calc(16px + env(safe-area-inset-bottom));
+ inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
z-index: 1;
}
ha-fab {
position: relative;
- bottom: calc(-80px - var(--safe-area-inset-bottom));
+ bottom: calc(-80px - env(safe-area-inset-bottom));
transition: bottom 0.3s;
}
.fab.selected ha-fab {
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 7ac9a64b44..8a56f7a9cf 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -969,7 +969,7 @@ class HUIRoot extends LitElement {
width: var(--mdc-top-app-bar-width, 100%);
-webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
backdrop-filter: var(--app-header-backdrop-filter, none);
- padding-top: var(--safe-area-inset-top);
+ padding-top: env(safe-area-inset-top);
z-index: 4;
transition: box-shadow 200ms linear;
}
@@ -1064,12 +1064,12 @@ class HUIRoot extends LitElement {
display: flex;
min-height: 100vh;
box-sizing: border-box;
- padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
- padding-left: var(--safe-area-inset-left);
- padding-right: var(--safe-area-inset-right);
- padding-inline-start: var(--safe-area-inset-left);
- padding-inline-end: var(--safe-area-inset-right);
- padding-bottom: var(--safe-area-inset-bottom);
+ padding-top: calc(var(--header-height) + env(safe-area-inset-top));
+ padding-left: env(safe-area-inset-left);
+ padding-right: env(safe-area-inset-right);
+ padding-inline-start: env(safe-area-inset-left);
+ padding-inline-end: env(safe-area-inset-right);
+ padding-bottom: env(safe-area-inset-bottom);
}
hui-view-container > * {
flex: 1 1 100%;
@@ -1080,7 +1080,7 @@ class HUIRoot extends LitElement {
*/
.edit-mode hui-view-container {
padding-top: calc(
- var(--header-height) + 48px + var(--safe-area-inset-top)
+ var(--header-height) + 48px + env(safe-area-inset-top)
);
}
.hide-tab {
diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts
index d524cf25a6..dc90245e1d 100644
--- a/src/panels/lovelace/views/hui-masonry-view.ts
+++ b/src/panels/lovelace/views/hui-masonry-view.ts
@@ -329,9 +329,9 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
ha-fab {
position: fixed;
- right: calc(16px + var(--safe-area-inset-right));
- bottom: calc(16px + var(--safe-area-inset-bottom));
- inset-inline-end: calc(16px + var(--safe-area-inset-right));
+ right: calc(16px + env(safe-area-inset-right));
+ bottom: calc(16px + env(safe-area-inset-bottom));
+ inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
z-index: 1;
}
diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts
index 72ddb347d7..17b091a3e3 100644
--- a/src/panels/lovelace/views/hui-panel-view.ts
+++ b/src/panels/lovelace/views/hui-panel-view.ts
@@ -135,11 +135,11 @@ export class PanelView extends LitElement implements LovelaceViewElement {
ha-fab {
position: fixed;
- right: calc(16px + var(--safe-area-inset-right));
- bottom: calc(16px + var(--safe-area-inset-bottom));
+ right: calc(16px + env(safe-area-inset-right));
+ bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 1;
float: var(--float-end);
- inset-inline-end: calc(16px + var(--safe-area-inset-right));
+ inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
}
`;
diff --git a/src/panels/lovelace/views/hui-sidebar-view.ts b/src/panels/lovelace/views/hui-sidebar-view.ts
index bba45ffd47..a445737a35 100644
--- a/src/panels/lovelace/views/hui-sidebar-view.ts
+++ b/src/panels/lovelace/views/hui-sidebar-view.ts
@@ -242,9 +242,9 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
ha-fab {
position: fixed;
- right: calc(16px + var(--safe-area-inset-right));
- bottom: calc(16px + var(--safe-area-inset-bottom));
- inset-inline-end: calc(16px + var(--safe-area-inset-right));
+ right: calc(16px + env(safe-area-inset-right));
+ bottom: calc(16px + env(safe-area-inset-bottom));
+ inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
z-index: 1;
}
diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts
index cca18bdefa..3add74d949 100644
--- a/src/panels/media-browser/ha-bar-media-player.ts
+++ b/src/panels/media-browser/ha-bar-media-player.ts
@@ -565,7 +565,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
var(--card-background-color, white)
);
border-top: 1px solid var(--divider-color);
- padding-bottom: var(--safe-area-inset-bottom);
+ padding-bottom: env(safe-area-inset-bottom);
}
mwc-linear-progress {
diff --git a/src/panels/profile/ha-profile-section-general.ts b/src/panels/profile/ha-profile-section-general.ts
index 90a18e08fe..4cd71d7ed7 100644
--- a/src/panels/profile/ha-profile-section-general.ts
+++ b/src/panels/profile/ha-profile-section-general.ts
@@ -239,7 +239,7 @@ class HaProfileSectionGeneral extends LitElement {
display: block;
max-width: 600px;
margin: 0 auto;
- padding-bottom: var(--safe-area-inset-bottom);
+ padding-bottom: env(safe-area-inset-bottom);
}
.content > * {
diff --git a/src/panels/profile/ha-profile-section-security.ts b/src/panels/profile/ha-profile-section-security.ts
index b6540a09f5..83b2043138 100644
--- a/src/panels/profile/ha-profile-section-security.ts
+++ b/src/panels/profile/ha-profile-section-security.ts
@@ -98,7 +98,7 @@ class HaProfileSectionSecurity extends LitElement {
display: block;
max-width: 600px;
margin: 0 auto;
- padding-bottom: var(--safe-area-inset-bottom);
+ padding-bottom: env(safe-area-inset-bottom);
}
.content > * {
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index 4d7aef04d6..ba0b56164f 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -21,22 +21,6 @@ export const haStyle = css`
font-size: var(--paper-font-body1_-_font-size);
font-weight: var(--paper-font-body1_-_font-weight);
line-height: var(--paper-font-body1_-_line-height);
- --safe-area-inset-bottom: var(
- --android-safe-area-inset-bottom,
- env(safe-area-inset-bottom, 0)
- );
- --safe-area-inset-top: var(
- --android-safe-area-inset-top,
- env(safe-area-inset-top, 0)
- );
- --safe-area-inset-left: var(
- --android-safe-area-inset-left,
- env(safe-area-inset-left, 0)
- );
- --safe-area-inset-right: var(
- --android-safe-area-inset-right,
- env(safe-area-inset-right, 0)
- );
}
app-header div[sticky] {
@@ -179,10 +163,10 @@ export const haStyleDialog = css`
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
- 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
+ 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;