Skip to content

Commit ee10f90

Browse files
Gregman-jsGregman-js
authored
Unified safe area (insets) for Android and iOS (#23811)
* feat: Introduce new css variables for safe area * feat: Replace all safe area env with variable * fix: CR fix move from derived styles to styles and rename
1 parent 4f9ec62 commit ee10f90

File tree

49 files changed

+165
-149
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+165
-149
lines changed

‎demo/src/html/index.html.template

+2-2
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,15 @@
6868
}
6969
#ha-launch-screen .ha-launch-screen-spacer-top {
7070
flex: 1;
71-
margin-top: calc( 2 * max(env(safe-area-inset-bottom), 48px) + 46px );
71+
margin-top: calc( 2 * max(var(--safe-area-inset-bottom), 48px) + 46px );
7272
padding-top: 48px;
7373
}
7474
#ha-launch-screen .ha-launch-screen-spacer-bottom {
7575
flex: 1;
7676
padding-top: 48px;
7777
}
7878
.ohf-logo {
79-
margin: max(env(safe-area-inset-bottom), 48px) 0;
79+
margin: max(var(--safe-area-inset-bottom), 48px) 0;
8080
display: flex;
8181
flex-direction: column;
8282
align-items: center;

‎hassio/src/dashboard/hassio-dashboard.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -132,9 +132,9 @@ class HassioDashboard extends LitElement {
132132
}
133133
ha-fab.non-tabs {
134134
position: fixed;
135-
right: calc(16px + env(safe-area-inset-right));
136-
bottom: calc(16px + env(safe-area-inset-bottom));
137-
inset-inline-end: calc(16px + env(safe-area-inset-right));
135+
right: calc(16px + var(--safe-area-inset-right));
136+
bottom: calc(16px + var(--safe-area-inset-bottom));
137+
inset-inline-end: calc(16px + var(--safe-area-inset-right));
138138
inset-inline-start: initial;
139139
z-index: 1;
140140
}

‎hassio/src/dialogs/network/dialog-hassio-network.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -621,7 +621,7 @@ export class DialogHassioNetwork
621621
display: flex;
622622
justify-content: space-between;
623623
padding: 8px;
624-
padding-bottom: max(env(safe-area-inset-bottom), 8px);
624+
padding-bottom: max(var(--safe-area-inset-bottom), 8px);
625625
background-color: var(--mdc-theme-surface, #fff);
626626
}
627627
.warning {

‎src/components/ha-dialog.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export class HaDialog extends DialogBase {
9090
}
9191
.mdc-dialog__actions {
9292
justify-content: var(--justify-action-buttons, flex-end);
93-
padding-bottom: max(env(safe-area-inset-bottom), 24px);
93+
padding-bottom: max(var(--safe-area-inset-bottom), 24px);
9494
}
9595
.mdc-dialog__actions span:nth-child(1) {
9696
flex: var(--secondary-action-button-flex, unset);
@@ -120,7 +120,7 @@ export class HaDialog extends DialogBase {
120120
:host([hideactions]) .mdc-dialog .mdc-dialog__content {
121121
padding-bottom: max(
122122
var(--dialog-content-padding, 24px),
123-
env(safe-area-inset-bottom)
123+
var(--safe-area-inset-bottom)
124124
);
125125
}
126126
.mdc-dialog .mdc-dialog__surface {

‎src/components/ha-md-dialog.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -167,10 +167,10 @@ export class HaMdDialog extends MdDialog {
167167
@media all and (max-width: 450px), all and (max-height: 500px) {
168168
:host(:not([type="alert"])) {
169169
min-width: calc(
170-
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
170+
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
171171
);
172172
max-width: calc(
173-
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
173+
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
174174
);
175175
min-height: 100%;
176176
max-height: 100%;

‎src/components/ha-sidebar.ts

+10-10
Original file line numberDiff line numberDiff line change
@@ -875,12 +875,12 @@ class HaSidebar extends SubscribeMixin(LitElement) {
875875
);
876876
font-size: 20px;
877877
align-items: center;
878-
padding-left: calc(4px + env(safe-area-inset-left));
879-
padding-inline-start: calc(4px + env(safe-area-inset-left));
878+
padding-left: calc(4px + var(--safe-area-inset-left));
879+
padding-inline-start: calc(4px + var(--safe-area-inset-left));
880880
padding-inline-end: initial;
881881
}
882882
:host([expanded]) .menu {
883-
width: calc(256px + env(safe-area-inset-left));
883+
width: calc(256px + var(--safe-area-inset-left));
884884
}
885885
.menu ha-icon-button {
886886
color: var(--sidebar-icon-color);
@@ -917,12 +917,12 @@ class HaSidebar extends SubscribeMixin(LitElement) {
917917
box-sizing: border-box;
918918
height: calc(100% - var(--header-height) - 132px);
919919
height: calc(
920-
100% - var(--header-height) - 132px - env(safe-area-inset-bottom)
920+
100% - var(--header-height) - 132px - var(--safe-area-inset-bottom)
921921
);
922922
overflow-x: hidden;
923923
background: none;
924-
margin-left: env(safe-area-inset-left);
925-
margin-inline-start: env(safe-area-inset-left);
924+
margin-left: var(--safe-area-inset-left);
925+
margin-inline-start: var(--safe-area-inset-left);
926926
margin-inline-end: initial;
927927
}
928928
@@ -1022,8 +1022,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
10221022
.notifications-container,
10231023
.configuration-container {
10241024
display: flex;
1025-
margin-left: env(safe-area-inset-left);
1026-
margin-inline-start: env(safe-area-inset-left);
1025+
margin-left: var(--safe-area-inset-left);
1026+
margin-inline-start: var(--safe-area-inset-left);
10271027
margin-inline-end: initial;
10281028
}
10291029
.notifications {
@@ -1034,8 +1034,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
10341034
flex: 1;
10351035
}
10361036
.profile {
1037-
margin-left: env(safe-area-inset-left);
1038-
margin-inline-start: env(safe-area-inset-left);
1037+
margin-left: var(--safe-area-inset-left);
1038+
margin-inline-start: var(--safe-area-inset-left);
10391039
margin-inline-end: initial;
10401040
}
10411041
.profile paper-icon-item {

‎src/components/ha-toast.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ export class HaToast extends Snackbar {
1414
1515
.mdc-snackbar {
1616
margin: 8px;
17-
right: calc(8px + env(safe-area-inset-right));
18-
bottom: calc(8px + env(safe-area-inset-bottom));
19-
left: calc(8px + env(safe-area-inset-left));
17+
right: calc(8px + var(--safe-area-inset-right));
18+
bottom: calc(8px + var(--safe-area-inset-bottom));
19+
left: calc(8px + var(--safe-area-inset-left));
2020
}
2121
2222
.mdc-snackbar__surface {
@@ -33,9 +33,9 @@ export class HaToast extends Snackbar {
3333
3434
@media all and (max-width: 450px), all and (max-height: 500px) {
3535
.mdc-snackbar {
36-
right: env(safe-area-inset-right);
37-
bottom: env(safe-area-inset-bottom);
38-
left: env(safe-area-inset-left);
36+
right: var(--safe-area-inset-right);
37+
bottom: var(--safe-area-inset-bottom);
38+
left: var(--safe-area-inset-left);
3939
}
4040
.mdc-snackbar__surface {
4141
min-width: 100%;

‎src/dialogs/more-info/controls/more-info-update.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -434,8 +434,8 @@ class MoreInfoUpdate extends LitElement {
434434
position: sticky;
435435
bottom: 0;
436436
margin: 0 -24px 0 -24px;
437-
margin-bottom: calc(-1 * max(env(safe-area-inset-bottom), 24px));
438-
padding-bottom: env(safe-area-inset-bottom);
437+
margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px));
438+
padding-bottom: var(--safe-area-inset-bottom);
439439
box-sizing: border-box;
440440
display: flex;
441441
flex-direction: column;

‎src/dialogs/more-info/ha-more-info-info.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export class MoreInfoInfo extends LitElement {
128128
flex-direction: column;
129129
flex: 1;
130130
padding: 24px;
131-
padding-bottom: max(env(safe-area-inset-bottom), 24px);
131+
padding-bottom: max(var(--safe-area-inset-bottom), 24px);
132132
}
133133
134134
[data-domain="camera"] .content {

‎src/dialogs/notifications/notification-drawer.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -159,11 +159,11 @@ export class HuiNotificationDrawer extends LitElement {
159159
.notifications {
160160
overflow-y: auto;
161161
padding-top: 16px;
162-
padding-left: env(safe-area-inset-left);
163-
padding-right: env(safe-area-inset-right);
164-
padding-inline-start: env(safe-area-inset-left);
165-
padding-inline-end: env(safe-area-inset-right);
166-
padding-bottom: env(safe-area-inset-bottom);
162+
padding-left: var(--safe-area-inset-left);
163+
padding-right: var(--safe-area-inset-right);
164+
padding-inline-start: var(--safe-area-inset-left);
165+
padding-inline-end: var(--safe-area-inset-right);
166+
padding-bottom: var(--safe-area-inset-bottom);
167167
height: calc(100% - 1px - var(--header-height));
168168
box-sizing: border-box;
169169
background-color: var(--primary-background-color);

‎src/html/index.html.template

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,15 @@
4444
}
4545
#ha-launch-screen .ha-launch-screen-spacer-top {
4646
flex: 1;
47-
margin-top: calc( 2 * max(env(safe-area-inset-bottom), 48px) + 46px );
47+
margin-top: calc( 2 * max(var(--safe-area-inset-bottom), 48px) + 46px );
4848
padding-top: 48px;
4949
}
5050
#ha-launch-screen .ha-launch-screen-spacer-bottom {
5151
flex: 1;
5252
padding-top: 48px;
5353
}
5454
.ohf-logo {
55-
margin: max(env(safe-area-inset-bottom), 48px) 0;
55+
margin: max(var(--safe-area-inset-bottom), 48px) 0;
5656
display: flex;
5757
flex-direction: column;
5858
align-items: center;

‎src/layouts/hass-subpage.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -148,18 +148,18 @@ class HassSubpage extends LitElement {
148148
149149
#fab {
150150
position: absolute;
151-
right: calc(16px + env(safe-area-inset-right));
152-
inset-inline-end: calc(16px + env(safe-area-inset-right));
151+
right: calc(16px + var(--safe-area-inset-right));
152+
inset-inline-end: calc(16px + var(--safe-area-inset-right));
153153
inset-inline-start: initial;
154-
bottom: calc(16px + env(safe-area-inset-bottom));
154+
bottom: calc(16px + var(--safe-area-inset-bottom));
155155
z-index: 1;
156156
display: flex;
157157
flex-wrap: wrap;
158158
justify-content: flex-end;
159159
gap: 8px;
160160
}
161161
:host([narrow]) #fab.tabs {
162-
bottom: calc(84px + env(safe-area-inset-bottom));
162+
bottom: calc(84px + var(--safe-area-inset-bottom));
163163
}
164164
#fab[is-wide] {
165165
bottom: 24px;

‎src/layouts/hass-tabs-subpage-data-table.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -903,10 +903,10 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
903903
904904
ha-dialog {
905905
--mdc-dialog-min-width: calc(
906-
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
906+
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
907907
);
908908
--mdc-dialog-max-width: calc(
909-
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
909+
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
910910
);
911911
--mdc-dialog-min-height: 100%;
912912
--mdc-dialog-max-height: 100%;

‎src/layouts/hass-tabs-subpage.ts

+12-12
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,7 @@ class HassTabsSubpage extends LitElement {
280280
z-index: 2;
281281
font-size: 12px;
282282
width: 100%;
283-
padding-bottom: env(safe-area-inset-bottom);
283+
padding-bottom: var(--safe-area-inset-bottom);
284284
}
285285
286286
#tabbar:not(.bottom-bar) {
@@ -312,44 +312,44 @@ class HassTabsSubpage extends LitElement {
312312
.content {
313313
position: relative;
314314
width: calc(
315-
100% - env(safe-area-inset-left) - env(safe-area-inset-right)
315+
100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)
316316
);
317-
margin-left: env(safe-area-inset-left);
318-
margin-right: env(safe-area-inset-right);
319-
margin-inline-start: env(safe-area-inset-left);
320-
margin-inline-end: env(safe-area-inset-right);
317+
margin-left: var(--safe-area-inset-left);
318+
margin-right: var(--safe-area-inset-right);
319+
margin-inline-start: var(--safe-area-inset-left);
320+
margin-inline-end: var(--safe-area-inset-right);
321321
overflow: auto;
322322
-webkit-overflow-scrolling: touch;
323323
}
324324
325325
:host([narrow]) .content {
326326
height: calc(100% - var(--header-height));
327327
height: calc(
328-
100% - var(--header-height) - env(safe-area-inset-bottom)
328+
100% - var(--header-height) - var(--safe-area-inset-bottom)
329329
);
330330
}
331331
332332
:host([narrow]) .content.tabs {
333333
height: calc(100% - 2 * var(--header-height));
334334
height: calc(
335-
100% - 2 * var(--header-height) - env(safe-area-inset-bottom)
335+
100% - 2 * var(--header-height) - var(--safe-area-inset-bottom)
336336
);
337337
}
338338
339339
#fab {
340340
position: fixed;
341-
right: calc(16px + env(safe-area-inset-right));
342-
inset-inline-end: calc(16px + env(safe-area-inset-right));
341+
right: calc(16px + var(--safe-area-inset-right));
342+
inset-inline-end: calc(16px + var(--safe-area-inset-right));
343343
inset-inline-start: initial;
344-
bottom: calc(16px + env(safe-area-inset-bottom));
344+
bottom: calc(16px + var(--safe-area-inset-bottom));
345345
z-index: 1;
346346
display: flex;
347347
flex-wrap: wrap;
348348
justify-content: flex-end;
349349
gap: 8px;
350350
}
351351
:host([narrow]) #fab.tabs {
352-
bottom: calc(84px + env(safe-area-inset-bottom));
352+
bottom: calc(84px + var(--safe-area-inset-bottom));
353353
}
354354
#fab[is-wide] {
355355
bottom: 24px;

‎src/layouts/home-assistant-main.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ export class HomeAssistantMain extends LitElement {
172172
--mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
173173
}
174174
:host([expanded]) {
175-
--mdc-drawer-width: calc(256px + env(safe-area-inset-left));
175+
--mdc-drawer-width: calc(256px + var(--safe-area-inset-left));
176176
}
177177
:host([modal]) {
178178
--mdc-drawer-width: unset;

‎src/panels/config/automation/ha-automation-editor.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1098,7 +1098,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
10981098
}
10991099
ha-fab {
11001100
position: relative;
1101-
bottom: calc(-80px - env(safe-area-inset-bottom));
1101+
bottom: calc(-80px - var(--safe-area-inset-bottom));
11021102
transition: bottom 0.3s;
11031103
}
11041104
ha-fab.dirty {

‎src/panels/config/backup/components/overview/ha-backup-overview-backups.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ class HaBackupOverviewBackups extends LitElement {
122122
gap: 24px;
123123
display: flex;
124124
flex-direction: column;
125-
margin-bottom: calc(72px + env(safe-area-inset-bottom));
125+
margin-bottom: calc(72px + var(--safe-area-inset-bottom));
126126
}
127127
.card-actions {
128128
display: flex;

‎src/panels/config/core/ha-config-section-updates.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ class HaConfigSectionUpdates extends LitElement {
195195
justify-content: space-between;
196196
flex-direction: column;
197197
display: flex;
198-
margin-bottom: max(24px, env(safe-area-inset-bottom));
198+
margin-bottom: max(24px, var(--safe-area-inset-bottom));
199199
}
200200
201201
.card-content {

‎src/panels/config/core/ha-config-system-navigation.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ class HaConfigSystemNavigation extends LitElement {
223223
haStyle,
224224
css`
225225
:host(:not([narrow])) ha-card {
226-
margin-bottom: max(24px, env(safe-area-inset-bottom));
226+
margin-bottom: max(24px, var(--safe-area-inset-bottom));
227227
}
228228
229229
ha-config-section {
@@ -235,7 +235,7 @@ class HaConfigSystemNavigation extends LitElement {
235235
ha-card {
236236
overflow: hidden;
237237
margin-bottom: 24px;
238-
margin-bottom: max(24px, env(safe-area-inset-bottom));
238+
margin-bottom: max(24px, var(--safe-area-inset-bottom));
239239
}
240240
241241
ha-card a {

‎src/panels/config/dashboard/ha-config-dashboard.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -363,10 +363,10 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
363363
haStyle,
364364
css`
365365
ha-card:last-child {
366-
margin-bottom: env(safe-area-inset-bottom);
366+
margin-bottom: var(--safe-area-inset-bottom);
367367
}
368368
:host(:not([narrow])) ha-card:last-child {
369-
margin-bottom: max(24px, env(safe-area-inset-bottom));
369+
margin-bottom: max(24px, var(--safe-area-inset-bottom));
370370
}
371371
ha-config-section {
372372
margin: auto;
@@ -401,7 +401,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
401401
}
402402
403403
ha-tip {
404-
margin-bottom: max(env(safe-area-inset-bottom), 8px);
404+
margin-bottom: max(var(--safe-area-inset-bottom), 8px);
405405
}
406406
407407
.new {

‎src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -240,10 +240,10 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
240240
@media all and (max-width: 450px), all and (max-height: 500px) {
241241
ha-dialog {
242242
--mdc-dialog-min-width: calc(
243-
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
243+
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
244244
);
245245
--mdc-dialog-max-width: calc(
246-
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
246+
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
247247
);
248248
}
249249
}

0 commit comments

Comments
 (0)