diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template
index adcae133fb..09a6e7b514 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(env(safe-area-inset-bottom), 48px) + 46px );
+ margin-top: calc( 2 * max(var(--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(env(safe-area-inset-bottom), 48px) 0;
+ margin: max(var(--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 531f171541..4cbf3c97b4 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 + env(safe-area-inset-right));
- bottom: calc(16px + env(safe-area-inset-bottom));
- inset-inline-end: calc(16px + env(safe-area-inset-right));
+ 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));
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 f9b3a61613..862b81769a 100644
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@@ -610,7 +610,7 @@ export class DialogHassioNetwork
display: flex;
justify-content: space-between;
padding: 8px;
- padding-bottom: max(env(safe-area-inset-bottom), 8px);
+ padding-bottom: max(var(--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 64d5565cc8..933a70efef 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: 12px 24px max(env(safe-area-inset-bottom), 12px) 24px;
+ padding: 12px 24px max(var(--safe-area-inset-bottom), 12px) 24px;
}
.mdc-dialog__actions span:nth-child(1) {
flex: var(--secondary-action-button-flex, unset);
@@ -117,7 +117,7 @@ export class HaDialog extends DialogBase {
:host([hideactions]) .mdc-dialog .mdc-dialog__content {
padding-bottom: max(
var(--dialog-content-padding, 24px),
- env(safe-area-inset-bottom)
+ var(--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 61e6ae6a94..3aaf8e1a20 100644
--- a/src/components/ha-md-dialog.ts
+++ b/src/components/ha-md-dialog.ts
@@ -168,10 +168,10 @@ export class HaMdDialog extends Dialog {
@media all and (max-width: 450px), all and (max-height: 500px) {
:host(:not([type="alert"])) {
min-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
max-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--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 cf7753752d..64476ae81a 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -702,12 +702,12 @@ class HaSidebar extends SubscribeMixin(LitElement) {
);
font-size: var(--ha-font-size-xl);
align-items: center;
- padding-left: calc(4px + env(safe-area-inset-left));
- padding-inline-start: calc(4px + env(safe-area-inset-left));
+ padding-left: calc(4px + var(--safe-area-inset-left));
+ padding-inline-start: calc(4px + var(--safe-area-inset-left));
padding-inline-end: initial;
}
:host([expanded]) .menu {
- width: calc(256px + env(safe-area-inset-left));
+ width: calc(256px + var(--safe-area-inset-left));
}
.menu ha-icon-button {
color: var(--sidebar-icon-color);
@@ -735,11 +735,11 @@ class HaSidebar extends SubscribeMixin(LitElement) {
box-sizing: border-box;
height: calc(100% - var(--header-height) - 132px);
height: calc(
- 100% - var(--header-height) - 132px - env(safe-area-inset-bottom)
+ 100% - var(--header-height) - 132px - var(--safe-area-inset-bottom)
);
overflow-x: hidden;
background: none;
- margin-left: env(safe-area-inset-left);
+ margin-left: var(--safe-area-inset-left);
}
ha-md-list-item {
@@ -759,7 +759,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
}
:host([expanded]) ha-md-list-item {
width: 248px;
- width: calc(248px - env(safe-area-inset-left));
+ width: calc(248px - var(--safe-area-inset-left));
}
ha-md-list-item.selected {
diff --git a/src/components/ha-toast.ts b/src/components/ha-toast.ts
index 8946aee00c..4f6be82b24 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 + env(safe-area-inset-right));
- bottom: calc(8px + env(safe-area-inset-bottom));
- left: calc(8px + env(safe-area-inset-left));
+ right: calc(8px + var(--safe-area-inset-right));
+ bottom: calc(8px + var(--safe-area-inset-bottom));
+ left: calc(8px + var(--safe-area-inset-left));
}
.mdc-snackbar__surface {
@@ -37,9 +37,9 @@ export class HaToast extends Snackbar {
@media all and (max-width: 450px), all and (max-height: 500px) {
.mdc-snackbar {
- right: env(safe-area-inset-right);
- bottom: env(safe-area-inset-bottom);
- left: env(safe-area-inset-left);
+ right: var(--safe-area-inset-right);
+ bottom: var(--safe-area-inset-bottom);
+ left: var(--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 f303233e47..4bb768c1c7 100644
--- a/src/dialogs/more-info/controls/more-info-update.ts
+++ b/src/dialogs/more-info/controls/more-info-update.ts
@@ -471,8 +471,8 @@ class MoreInfoUpdate extends LitElement {
position: sticky;
bottom: 0;
margin: 0 -24px 0 -24px;
- margin-bottom: calc(-1 * max(env(safe-area-inset-bottom), 24px));
- padding-bottom: env(safe-area-inset-bottom);
+ margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px));
+ padding-bottom: var(--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 0517dd206c..5662726d2d 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(env(safe-area-inset-bottom), 24px);
+ padding-bottom: max(var(--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 a3c83bcd69..bbb41039eb 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: 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);
+ 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);
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 6c2aac0bdf..7ebaf349e6 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(env(safe-area-inset-bottom), 48px) + 46px );
+ margin-top: calc( 2 * max(var(--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(env(safe-area-inset-bottom), 48px) 0;
+ margin: max(var(--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 9859e09325..11be4952a6 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 + env(safe-area-inset-right));
- inset-inline-end: calc(16px + env(safe-area-inset-right));
+ right: calc(16px + var(--safe-area-inset-right));
+ inset-inline-end: calc(16px + var(--safe-area-inset-right));
inset-inline-start: initial;
- bottom: calc(16px + env(safe-area-inset-bottom));
+ bottom: calc(16px + var(--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 + env(safe-area-inset-bottom));
+ bottom: calc(84px + var(--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 98b0af1f01..dba3b154bd 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -878,10 +878,10 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
ha-dialog {
--mdc-dialog-min-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--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 c5955570a0..fd75686860 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -287,7 +287,7 @@ class HassTabsSubpage extends LitElement {
z-index: 2;
font-size: var(--ha-font-size-s);
width: 100%;
- padding-bottom: env(safe-area-inset-bottom);
+ padding-bottom: var(--safe-area-inset-bottom);
}
#tabbar:not(.bottom-bar) {
@@ -319,12 +319,12 @@ class HassTabsSubpage extends LitElement {
.content {
position: relative;
width: calc(
- 100% - env(safe-area-inset-left) - env(safe-area-inset-right)
+ 100% - var(--safe-area-inset-left) - 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);
+ 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);
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@@ -332,31 +332,31 @@ class HassTabsSubpage extends LitElement {
:host([narrow]) .content {
height: calc(100% - var(--header-height));
height: calc(
- 100% - var(--header-height) - env(safe-area-inset-bottom)
+ 100% - var(--header-height) - var(--safe-area-inset-bottom)
);
}
:host([narrow]) .content.tabs {
height: calc(100% - 2 * var(--header-height));
height: calc(
- 100% - 2 * var(--header-height) - env(safe-area-inset-bottom)
+ 100% - 2 * var(--header-height) - var(--safe-area-inset-bottom)
);
}
.content .fab-bottom-space {
- height: calc(64px + env(safe-area-inset-bottom));
+ height: calc(64px + var(--safe-area-inset-bottom));
}
:host([narrow]) .content.tabs .fab-bottom-space {
- height: calc(80px + env(safe-area-inset-bottom));
+ height: calc(80px + var(--safe-area-inset-bottom));
}
#fab {
position: fixed;
- right: calc(16px + env(safe-area-inset-right));
- inset-inline-end: calc(16px + env(safe-area-inset-right));
+ right: calc(16px + var(--safe-area-inset-right));
+ inset-inline-end: calc(16px + var(--safe-area-inset-right));
inset-inline-start: initial;
- bottom: calc(16px + env(safe-area-inset-bottom));
+ bottom: calc(16px + var(--safe-area-inset-bottom));
z-index: 1;
display: flex;
flex-wrap: wrap;
@@ -364,7 +364,7 @@ class HassTabsSubpage extends LitElement {
gap: 8px;
}
:host([narrow]) #fab.tabs {
- bottom: calc(84px + env(safe-area-inset-bottom));
+ bottom: calc(84px + var(--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 eeb66d9fa1..75d5a54765 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -182,7 +182,7 @@ export class HomeAssistantMain extends LitElement {
--mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
}
:host([expanded]) {
- --mdc-drawer-width: calc(256px + env(safe-area-inset-left));
+ --mdc-drawer-width: calc(256px + var(--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 b6e2da8732..5fae94ede3 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -1117,7 +1117,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
}
ha-fab {
position: relative;
- bottom: calc(-80px - env(safe-area-inset-bottom));
+ bottom: calc(-80px - var(--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 c140713aba..583f6c6d57 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 + env(safe-area-inset-bottom));
+ margin-bottom: calc(72px + var(--safe-area-inset-bottom));
}
.card-actions {
display: flex;
diff --git a/src/panels/config/backup/ha-config-backup-overview.ts b/src/panels/config/backup/ha-config-backup-overview.ts
index 6a4fb1bb68..6e37724882 100644
--- a/src/panels/config/backup/ha-config-backup-overview.ts
+++ b/src/panels/config/backup/ha-config-backup-overview.ts
@@ -251,7 +251,7 @@ class HaConfigBackupOverview extends LitElement {
gap: 24px;
display: flex;
flex-direction: column;
- margin-bottom: calc(env(safe-area-inset-bottom) + 72px);
+ margin-bottom: calc(var(--safe-area-inset-bottom) + 72px);
}
.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 7e3813d9c3..ba334d7f3d 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, env(safe-area-inset-bottom));
+ margin-bottom: max(24px, var(--safe-area-inset-bottom));
}
ha-config-updates {
margin-bottom: 8px;
diff --git a/src/panels/config/core/ha-config-system-navigation.ts b/src/panels/config/core/ha-config-system-navigation.ts
index 3fc8684347..85e9425884 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, env(safe-area-inset-bottom));
+ margin-bottom: max(24px, var(--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, env(safe-area-inset-bottom));
+ margin-bottom: max(24px, var(--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 eb83876aa3..fcfa1550ac 100644
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/src/panels/config/dashboard/ha-config-dashboard.ts
@@ -387,10 +387,10 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
haStyle,
css`
ha-card:last-child {
- margin-bottom: env(safe-area-inset-bottom);
+ margin-bottom: var(--safe-area-inset-bottom);
}
:host(:not([narrow])) ha-card:last-child {
- margin-bottom: max(24px, env(safe-area-inset-bottom));
+ margin-bottom: max(24px, var(--safe-area-inset-bottom));
}
ha-config-section {
margin: auto;
@@ -425,7 +425,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
}
ha-tip {
- margin-bottom: max(env(safe-area-inset-bottom), 8px);
+ margin-bottom: max(var(--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 b531b5e2d3..08fd1cd604 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 - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--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 9c91e4b612..89871ba7ac 100644
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/src/panels/config/entities/entity-registry-settings.ts
@@ -252,7 +252,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
display: flex;
padding: 8px 16px 8px 24px;
justify-content: space-between;
- padding-bottom: max(env(safe-area-inset-bottom), 8px);
+ padding-bottom: max(var(--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 943e7dd33e..6f3763abe7 100644
--- a/src/panels/config/info/ha-config-info.ts
+++ b/src/panels/config/info/ha-config-info.ts
@@ -366,7 +366,7 @@ class HaConfigInfo extends LitElement {
}
.pages {
- margin-bottom: max(24px, env(safe-area-inset-bottom));
+ margin-bottom: max(24px, var(--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 b4ce0b7e68..44649761ed 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 - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
}
}
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts
index 245a7ba841..7723a7f39a 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts
@@ -1109,10 +1109,10 @@ class DialogZWaveJSAddNode extends SubscribeMixin(LitElement) {
@media all and (max-width: 500px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;
diff --git a/src/panels/config/repairs/ha-config-repairs-dashboard.ts b/src/panels/config/repairs/ha-config-repairs-dashboard.ts
index 67c352775c..cbbe39f394 100644
--- a/src/panels/config/repairs/ha-config-repairs-dashboard.ts
+++ b/src/panels/config/repairs/ha-config-repairs-dashboard.ts
@@ -183,7 +183,7 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
justify-content: space-between;
flex-direction: column;
display: flex;
- margin-bottom: max(24px, env(safe-area-inset-bottom));
+ margin-bottom: max(24px, var(--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 752463acb7..d118cbf9c9 100644
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@@ -1251,7 +1251,7 @@ export class HaSceneEditor extends PreventUnsavedMixin(
}
ha-fab {
position: relative;
- bottom: calc(-80px - env(safe-area-inset-bottom));
+ bottom: calc(-80px - var(--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 2ff834755e..0e422ae834 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -1056,7 +1056,7 @@ export class HaScriptEditor extends SubscribeMixin(
}
ha-fab {
position: relative;
- bottom: calc(-80px - env(safe-area-inset-bottom));
+ bottom: calc(-80px - var(--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 ed1f790fa4..05819a20ee 100644
--- a/src/panels/config/voice-assistants/dialog-expose-entity.ts
+++ b/src/panels/config/voice-assistants/dialog-expose-entity.ts
@@ -236,10 +236,10 @@ class DialogExposeEntity extends LitElement {
@media all and (max-width: 500px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--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 0a25f8d713..d82eee00b6 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 - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--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 065d1e5149..00e3698e1d 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 - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--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 fd38101a02..610b53be71 100644
--- a/src/panels/developer-tools/action/developer-tools-action.ts
+++ b/src/panels/developer-tools/action/developer-tools-action.ts
@@ -601,19 +601,19 @@ class HaPanelDevAction extends LitElement {
css`
.content {
padding: 16px;
- 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));
+ 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));
max-width: 1200px;
margin: auto;
}
.button-row {
padding: 8px 16px;
- 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));
+ 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));
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 45dd691c79..7cf30d9905 100644
--- a/src/panels/developer-tools/assist/developer-tools-assist.ts
+++ b/src/panels/developer-tools/assist/developer-tools-assist.ts
@@ -236,10 +236,10 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
css`
.content {
padding: 28px 20px 16px;
- 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)));
+ 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)));
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 7b268aef88..a75ab05a85 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, 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));
+ 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));
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 a3cef59da7..6bf2112393 100644
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -129,7 +129,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: env(safe-area-inset-top);
+ padding-top: var(--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);
@@ -157,9 +157,9 @@ class PanelDeveloperTools extends LitElement {
developer-tools-router {
display: block;
padding-top: calc(
- var(--header-height) + 48px + env(safe-area-inset-top)
+ var(--header-height) + 48px + var(--safe-area-inset-top)
);
- padding-bottom: calc(env(safe-area-inset-bottom));
+ padding-bottom: calc(var(--safe-area-inset-bottom));
flex: 1 1 100%;
max-width: 100%;
}
diff --git a/src/panels/developer-tools/state/developer-tools-state.ts b/src/panels/developer-tools/state/developer-tools-state.ts
index 047b4aaaa2..5b9596b3a0 100644
--- a/src/panels/developer-tools/state/developer-tools-state.ts
+++ b/src/panels/developer-tools/state/developer-tools-state.ts
@@ -596,10 +596,10 @@ class HaPanelDevState extends LitElement {
-moz-user-select: initial;
display: block;
padding: 16px;
- 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));
+ 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));
}
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 83f71b8a2e..a171eb1a24 100644
--- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts
+++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
@@ -800,10 +800,10 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
ha-dialog {
--mdc-dialog-min-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--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 7e40413082..e43b12cdd7 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -276,17 +276,17 @@ ${type === "object"
.content {
gap: 16px;
padding: 16px;
- 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));
+ 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));
}
.content.horizontal {
--code-mirror-max-height: calc(
100vh - var(--header-height) - (var(--ha-line-height-normal) * 3) -
- (1em * 2) - (max(16px, env(safe-area-inset-top)) * 2) -
- (max(16px, env(safe-area-inset-bottom)) * 2) -
+ (1em * 2) - (max(16px, var(--safe-area-inset-top)) * 2) -
+ (max(16px, var(--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 047fe5e9ff..b74587916b 100644
--- a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
+++ b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
@@ -251,10 +251,10 @@ export class DeveloperYamlConfig extends LitElement {
.content {
padding: 28px 20px 16px;
- 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)));
+ 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)));
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 e0f692b5c8..e416d2d01d 100644
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@@ -487,7 +487,7 @@ class PanelEnergy extends LitElement {
position: fixed;
top: 0;
width: var(--mdc-top-app-bar-width, 100%);
- padding-top: env(safe-area-inset-top);
+ padding-top: var(--safe-area-inset-top);
z-index: 4;
transition: box-shadow 200ms linear;
display: flex;
@@ -528,12 +528,12 @@ class PanelEnergy extends LitElement {
display: flex;
min-height: 100vh;
box-sizing: border-box;
- 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);
+ 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);
}
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 b52f3eaf19..12d18e4286 100644
--- a/src/panels/history/ha-panel-history.ts
+++ b/src/panels/history/ha-panel-history.ts
@@ -626,7 +626,7 @@ class HaPanelHistory extends LitElement {
.content {
padding: 0 16px 16px;
- padding-bottom: max(env(safe-area-inset-bottom), 16px);
+ padding-bottom: max(var(--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 392f439f73..6f3c9dfa0b 100644
--- a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
+++ b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
@@ -164,15 +164,15 @@ export class HuiUnusedEntities extends LitElement {
.fab {
position: sticky;
float: var(--float-end);
- 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));
+ 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));
inset-inline-start: initial;
z-index: 1;
}
ha-fab {
position: relative;
- bottom: calc(-80px - env(safe-area-inset-bottom));
+ bottom: calc(-80px - var(--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 d56652b3e6..44ca521c0a 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -1002,7 +1002,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: env(safe-area-inset-top);
+ padding-top: var(--safe-area-inset-top);
z-index: 4;
transition: box-shadow 200ms linear;
}
@@ -1153,12 +1153,12 @@ class HUIRoot extends LitElement {
display: flex;
min-height: 100vh;
box-sizing: border-box;
- 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);
+ 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);
}
hui-view-container > * {
flex: 1 1 100%;
@@ -1169,7 +1169,7 @@ class HUIRoot extends LitElement {
*/
.edit-mode hui-view-container {
padding-top: calc(
- var(--header-height) + 48px + env(safe-area-inset-top)
+ var(--header-height) + 48px + var(--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 80541e9efb..084ff7f9ba 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 + env(safe-area-inset-right));
- bottom: calc(16px + env(safe-area-inset-bottom));
- inset-inline-end: calc(16px + env(safe-area-inset-right));
+ 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));
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 17b091a3e3..72ddb347d7 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 + env(safe-area-inset-right));
- bottom: calc(16px + env(safe-area-inset-bottom));
+ right: calc(16px + var(--safe-area-inset-right));
+ bottom: calc(16px + var(--safe-area-inset-bottom));
z-index: 1;
float: var(--float-end);
- inset-inline-end: calc(16px + env(safe-area-inset-right));
+ inset-inline-end: calc(16px + var(--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 2f64ccc4de..c05ae5a403 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 + env(safe-area-inset-right));
- bottom: calc(16px + env(safe-area-inset-bottom));
- inset-inline-end: calc(16px + env(safe-area-inset-right));
+ 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));
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 66d5def2e0..718616840c 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: env(safe-area-inset-bottom);
+ padding-bottom: var(--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 4e9ebea2cb..a14043f625 100644
--- a/src/panels/profile/ha-profile-section-general.ts
+++ b/src/panels/profile/ha-profile-section-general.ts
@@ -284,7 +284,7 @@ class HaProfileSectionGeneral extends LitElement {
display: block;
max-width: 600px;
margin: 0 auto;
- padding-bottom: env(safe-area-inset-bottom);
+ padding-bottom: var(--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 83b2043138..b6540a09f5 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: env(safe-area-inset-bottom);
+ padding-bottom: var(--safe-area-inset-bottom);
}
.content > * {
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index f6207007cb..c279d44ced 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -161,10 +161,10 @@ export const haStyleDialog = css`
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;
diff --git a/src/resources/theme/main.globals.ts b/src/resources/theme/main.globals.ts
index 3c4b6c9cdb..a71b51c00a 100644
--- a/src/resources/theme/main.globals.ts
+++ b/src/resources/theme/main.globals.ts
@@ -26,6 +26,24 @@ export const mainStyles = css`
--float-end: right;
--margin-title-ltr: 0 0 0 24px;
--margin-title-rtl: 0 24px 0 0;
+
+ /* safe-area-insets */
+ --safe-area-inset-top: var(
+ --android-safe-area-inset-top,
+ env(safe-area-inset-top, 0)
+ );
+ --safe-area-inset-bottom: var(
+ --android-safe-area-inset-bottom,
+ env(safe-area-inset-bottom, 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)
+ );
}
`;