fix(mobile): add safe-area-inset on app layout and specific views (#14032)

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"]) {

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;
         }

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);

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 {

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 {

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 {

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;
         }

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 {