From 8a4b0b081a3e1f65a827c1425eec4763e752ebea Mon Sep 17 00:00:00 2001
From: Pierre <397503+bemble@users.noreply.github.com>
Date: Tue, 11 Oct 2022 15:45:15 +0200
Subject: [PATCH] fix(mobile): add safe-area-inset on app layout and specific
 views (#14032)

---
 src/layouts/ha-app-layout.js                              | 2 ++
 src/panels/developer-tools/event/developer-tools-event.js | 4 ++++
 .../developer-tools/service/developer-tools-service.ts    | 8 ++++++++
 src/panels/developer-tools/state/developer-tools-state.js | 4 ++++
 .../statistics/developer-tools-statistics.ts              | 4 ++++
 .../developer-tools/template/developer-tools-template.ts  | 4 ++++
 .../yaml_configuration/developer-yaml-config.ts           | 4 ++++
 src/panels/media-browser/ha-bar-media-player.ts           | 1 +
 8 files changed, 31 insertions(+)

diff --git a/src/layouts/ha-app-layout.js b/src/layouts/ha-app-layout.js
index 3cb455e46f..e4649bafa2 100644
--- a/src/layouts/ha-app-layout.js
+++ b/src/layouts/ha-app-layout.js
@@ -36,6 +36,8 @@ class HaAppLayout extends customElements.get("app-header-layout") {
          */
           position: relative;
           z-index: 0;
+          padding: env(safe-area-inset-top) env(safe-area-inset-right)
+            env(safe-area-inset-bottom) env(safe-area-inset-left);
         }
 
         #wrapper ::slotted([slot="header"]) {
diff --git a/src/panels/developer-tools/event/developer-tools-event.js b/src/panels/developer-tools/event/developer-tools-event.js
index dddd649f92..e4ec6e3509 100644
--- a/src/panels/developer-tools/event/developer-tools-event.js
+++ b/src/panels/developer-tools/event/developer-tools-event.js
@@ -26,6 +26,10 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
       <style>
         .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));
           max-width: 1200px;
           margin: auto;
         }
diff --git a/src/panels/developer-tools/service/developer-tools-service.ts b/src/panels/developer-tools/service/developer-tools-service.ts
index 82cdaa2d6f..8e45387ed2 100644
--- a/src/panels/developer-tools/service/developer-tools-service.ts
+++ b/src/panels/developer-tools/service/developer-tools-service.ts
@@ -392,11 +392,19 @@ class HaPanelDevService 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));
           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));
           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/state/developer-tools-state.js b/src/panels/developer-tools/state/developer-tools-state.js
index 3f29f1d1c7..6152506e91 100644
--- a/src/panels/developer-tools/state/developer-tools-state.js
+++ b/src/panels/developer-tools/state/developer-tools-state.js
@@ -41,6 +41,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           -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));
         }
 
         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 7ae5269b3a..7329e5dc66 100644
--- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts
+++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
@@ -327,6 +327,10 @@ class HaPanelDevStatistics extends SubscribeMixin(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));
         }
 
         th {
diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index 60071c5fcf..e686fbbdec 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -249,6 +249,10 @@ class HaPanelDevTemplate extends LitElement {
 
         .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));
         }
 
         .edit-pane {
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 2e0f565916..1686b8cb8d 100644
--- a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
+++ b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
@@ -220,6 +220,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)));
           max-width: 1040px;
           margin: 0 auto;
         }
diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts
index e99433e12f..1953f1b6de 100644
--- a/src/panels/media-browser/ha-bar-media-player.ts
+++ b/src/panels/media-browser/ha-bar-media-player.ts
@@ -573,6 +573,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);
       }
 
       mwc-linear-progress {