Safe area: bars

src/components/ha-top-app-bar-fixed.ts

@@ -8,12 +8,17 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
   static override styles = [
     styles,
     css`
+      header {
+        padding-top: var(--safe-area-inset-top);
+      }
       .mdc-top-app-bar__row {
         height: var(--header-height);
+        padding-left: var(--safe-area-content-inset-left);
+        padding-right: var(--safe-area-content-inset-right);
         border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
-        padding-top: var(--header-height);
+        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
       }
       .mdc-top-app-bar {
         --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
@@ -22,6 +27,9 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
+        padding-top: var(--safe-area-inset-top);
+        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
       }
       .mdc-top-app-bar__title {
         font-size: var(--ha-font-size-xl);

src/components/ha-top-app-bar.ts

@@ -13,7 +13,7 @@ export class HaTopAppBar extends TopAppBarBase {
         border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
-        padding-top: var(--header-height);
+        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
       }
       .mdc-top-app-bar {
         --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
@@ -22,6 +22,9 @@ export class HaTopAppBar extends TopAppBarBase {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
+        padding-top: var(--safe-area-inset-top);
+        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
       }
     `,
   ];

src/components/ha-two-pane-top-app-bar-fixed.ts

@@ -244,12 +244,15 @@ export class TopAppBarBaseBase extends BaseElement {
     styles,
     haStyleScrollbar,
     css`
+      header {
+        padding-top: var(--safe-area-inset-top);
+      }
       .mdc-top-app-bar__row {
         height: var(--header-height);
         border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
-        padding-top: var(--header-height);
+        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
       }
       .shadow-container {
         position: absolute;
@@ -274,6 +277,9 @@ export class TopAppBarBaseBase extends BaseElement {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
+        padding-top: var(--safe-area-inset-top);
+        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
       }
       .mdc-top-app-bar--pane.mdc-top-app-bar--fixed-scrolled {
         box-shadow: none;

src/layouts/hass-subpage.ts

@@ -29,31 +29,35 @@ class HassSubpage extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="toolbar">
-        ${this.mainPage || history.state?.root
-          ? html`
-              <ha-menu-button
-                .hassio=${this.supervisor}
-                .hass=${this.hass}
-                .narrow=${this.narrow}
-              ></ha-menu-button>
-            `
-          : this.backPath
+        <div class="toolbar-content">
+          ${this.mainPage || history.state?.root
             ? html`
-                <a href=${this.backPath}>
+                <ha-menu-button
+                  .hassio=${this.supervisor}
+                  .hass=${this.hass}
+                  .narrow=${this.narrow}
+                ></ha-menu-button>
+              `
+            : this.backPath
+              ? html`
+                  <a href=${this.backPath}>
+                    <ha-icon-button-arrow-prev
+                      .hass=${this.hass}
+                    ></ha-icon-button-arrow-prev>
+                  </a>
+                `
+              : html`
                   <ha-icon-button-arrow-prev
                     .hass=${this.hass}
+                    @click=${this._backTapped}
                   ></ha-icon-button-arrow-prev>
-                </a>
-              `
-            : html`
-                <ha-icon-button-arrow-prev
-                  .hass=${this.hass}
-                  @click=${this._backTapped}
-                ></ha-icon-button-arrow-prev>
-              `}
+                `}
 
-        <div class="main-title"><slot name="header">${this.header}</slot></div>
-        <slot name="toolbar-icon"></slot>
+          <div class="main-title">
+            <slot name="header">${this.header}</slot>
+          </div>
+          <slot name="toolbar-icon"></slot>
+        </div>
       </div>
       <div class="content ha-scrollbar" @scroll=${this._saveScrollPos}>
         <slot></slot>
@@ -95,23 +99,28 @@ class HassSubpage extends LitElement {
         }
 
         .toolbar {
+          padding-top: var(--safe-area-inset-top);
+          padding-right: var(--safe-area-inset-right);
+          padding-left: var(--safe-area-inset-left);
+          background-color: var(--app-header-background-color);
+          border-bottom: var(--app-header-border-bottom, none);
+          box-sizing: border-box;
+        }
+
+        .toolbar-content {
           display: flex;
           align-items: center;
           font-size: var(--ha-font-size-xl);
-          height: var(--header-height);
           padding: 8px 12px;
-          background-color: var(--app-header-background-color);
           font-weight: var(--ha-font-weight-normal);
           color: var(--app-header-text-color, white);
-          border-bottom: var(--app-header-border-bottom, none);
-          box-sizing: border-box;
         }
         @media (max-width: 599px) {
-          .toolbar {
+          .toolbar-content {
             padding: 4px;
           }
         }
-        .toolbar a {
+        .toolbar-content a {
           color: var(--sidebar-text-color);
           text-decoration: none;
         }
@@ -140,7 +149,9 @@ class HassSubpage extends LitElement {
         .content {
           position: relative;
           width: 100%;
-          height: calc(100% - 1px - var(--header-height));
+          height: calc(
+            100% - 1px - var(--header-height) - var(--safe-area-inset-top, 0px)
+          );
           overflow-y: auto;
           overflow: auto;
           -webkit-overflow-scrolling: touch;

src/layouts/hass-tabs-subpage.ts

@@ -240,7 +240,10 @@ class HassTabsSubpage extends LitElement {
 
         .toolbar {
           font-size: var(--ha-font-size-xl);
-          height: var(--header-height);
+          height: calc(var(--header-height) + var(--safe-area-inset-top));
+          padding-top: var(--safe-area-inset-top);
+          padding-right: var(--safe-area-inset-right);
+          padding-left: var(--safe-area-inset-left);
           background-color: var(--sidebar-background-color);
           font-weight: var(--ha-font-weight-normal);
           border-bottom: 1px solid var(--divider-color);

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -130,6 +130,8 @@ class PanelDeveloperTools extends LitElement {
           background-color: var(--app-header-background-color);
           width: var(--mdc-top-app-bar-width, 100%);
           padding-top: var(--safe-area-inset-top);
+          padding-left: var(--safe-area-inset-left);
+          padding-right: var(--safe-area-inset-right);
           color: var(--app-header-text-color, white);
           border-bottom: var(--app-header-border-bottom, none);
           -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);

src/panels/lovelace/hui-root.ts

@@ -1209,10 +1209,17 @@ class HUIRoot extends LitElement {
           border-bottom: var(--app-header-border-bottom, none);
           position: fixed;
           top: 0;
-          width: var(--mdc-top-app-bar-width, 100%);
+          width: var(
+            --mdc-top-app-bar-width,
+            calc(
+              100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)
+            )
+          );
           -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-left: var(--safe-area-inset-left);
+          padding-right: var(--safe-area-inset-right);
           z-index: 4;
           transition: box-shadow 200ms linear;
         }
@@ -1398,7 +1405,7 @@ class HUIRoot extends LitElement {
           padding-top: calc(
             var(--header-height, 56px) +
               calc(var(--tab-bar-height, 56px) - 2px) +
-              var(--safe-area-inset-top)
+              var(--safe-area-inset-top, 0px)
           );
         }
         .hide-tab {