Safe area: containers and panels

This commit squashes the following development history:

1e78af3 - Restore, moved to #26969
d672d9f - Restore
53ee5fb - Restore
16b4eb9 - Restore
8d8b13f - Restore
62e1661 - Apply changes from #27003
f5ee79a - Fix
6067868 - Fix
766ed6a - Fix
f76bd4f - Fix fabs
1879fd0 - Fix
ea3ee6d - Add safe areas to ha-hanel-custom
aa3384b - Add missing
c9a7f76 - Fix
78351fd - Fix
59789d3 - Fix
1c7aabd - Remove
eaf1373 - Fix
8481a93 - Fix
fe7df1f - Remove
69f244f - Restore
2eb936b - Adjust
b093506 - Fix
c0504bb - Clean
b0773d7 - Fix
4caa4a4 - make sure narrow is passed
8885f6b - Add safe areas to 2 pane fixed
62df70f - Clean
a87e68d - FIx
5086be0 - Fix energy
ac3478e - Fix
0f28098 - Restore
b65ba3d - Restore
b0e1ea6 - Restore
7bb78d1 - Fix
26c95df - Update
7369c79 - Remove
b5f31da - Fix
40cfc43 - Set top level padding instead of individual panels
83b4972 - Restore
25db158 - Fix
8c9c398 - Set top level app bar padding instead of individual panels
b7a1b27 - Remove
1e93687 - Device
1482502 - Integration page
98dc1bf - Fix
1c3de13 - Add
a08bee4 - Remove
0d46243 - Area subpage
4bfd608 - Areas fix
b5cbcda - Fix
9fb2720 - Add safe areas to script editor
7c3bc94 - Add safe areas to scene editor
1cf1b99 - Fix mobile for automation editors
4413bd4 - Add safe areas to automation editor
2e69533 - Add safe areas to blueprint editor
989776d - Add config section padding
6692b7c - Fix header row
22337b5 - Fix calendar
414e058 - Fix pane
f09ae0e - Fix calendar
fb5a984 - Fix pane
1daee18 - Todo fab
6f52cb4 - Todo content
9b317c5 - Media browser
0f8ca24 - Fix history panel
cd78437 - Fix logbook
b8d47ec - Fix
d15e931 - Safe area: dashboard view container should only apply left safe area when in full view

Summary of changes:
- Add narrow property to top app bar components for conditional safe area padding
- Update safe area inset calculations to use fallback values (0px) for better compatibility
- Fix content height calculations to account for safe area insets
- Apply safe area padding conditionally based on narrow state
- Update FAB positioning to respect safe area insets
- Ensure proper spacing and layout on mobile devices with notches/dynamic islands

Author: timmo001

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

@@ -1,10 +1,12 @@
 import { TopAppBarFixedBase } from "@material/mwc-top-app-bar-fixed/mwc-top-app-bar-fixed-base";
 import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
 import { css } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 
 @customElement("ha-top-app-bar-fixed")
 export class HaTopAppBarFixed extends TopAppBarFixedBase {
+  @property({ type: Boolean, reflect: true }) public narrow = false;
+
   static override styles = [
     styles,
     css`
@@ -13,12 +15,17 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
       }
       .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: calc(var(--safe-area-inset-top) + var(--header-height));
+        padding-top: calc(
+          var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
+        );
+        padding-bottom: var(--safe-area-inset-bottom);
+        padding-right: var(--safe-area-inset-right);
+      }
+      :host([narrow]) .mdc-top-app-bar--fixed-adjust {
+        padding-left: var(--safe-area-inset-left);
       }
       .mdc-top-app-bar {
         --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
@@ -28,9 +35,11 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
           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);
       }
+      :host([narrow]) .mdc-top-app-bar {
+        padding-left: var(--safe-area-inset-left);
+      }
       .mdc-top-app-bar__title {
         font-size: var(--ha-font-size-xl);
         padding-inline-start: 24px;

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

@@ -32,6 +32,8 @@ export class TopAppBarBaseBase extends BaseElement {
 
   protected _scrollTarget!: HTMLElement | Window;
 
+  @property({ type: Boolean, reflect: true }) public narrow = false;
+
   @property({ attribute: "center-title", type: Boolean }) centerTitle = false;
 
   @property({ type: Boolean, reflect: true }) prominent = false;
@@ -252,7 +254,14 @@ export class TopAppBarBaseBase extends BaseElement {
         border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
-        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
+        padding-top: calc(
+          var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
+        );
+        padding-bottom: var(--safe-area-inset-bottom);
+        padding-right: var(--safe-area-inset-right);
+      }
+      :host([narrow]) .mdc-top-app-bar--fixed-adjust {
+        padding-left: var(--safe-area-inset-left);
       }
       .shadow-container {
         position: absolute;
@@ -278,9 +287,11 @@ export class TopAppBarBaseBase extends BaseElement {
           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);
       }
+      :host([narrow]) .mdc-top-app-bar {
+        padding-left: var(--safe-area-inset-left);
+      }
       .mdc-top-app-bar--pane.mdc-top-app-bar--fixed-scrolled {
         box-shadow: none;
       }
@@ -294,7 +305,12 @@ export class TopAppBarBaseBase extends BaseElement {
       }
       div.mdc-top-app-bar--pane {
         display: flex;
-        height: calc(100vh - var(--header-height));
+        height: calc(
+          100vh - var(--header-height, 0px) - var(
+              --safe-area-inset-top,
+              0px
+            ) - var(--safe-area-inset-bottom, 0px)
+        );
       }
       .pane {
         border-right: 1px solid var(--divider-color);

src/layouts/hass-subpage.ts

@@ -147,32 +147,49 @@ class HassSubpage extends LitElement {
 
         .content {
           position: relative;
-          width: 100%;
-          height: calc(100% - 1px - var(--header-height));
+          width: calc(100% - var(--safe-area-inset-right, 0px));
+          height: calc(
+            100% -
+              1px - var(--header-height, 0px) - var(
+                --safe-area-inset-top,
+                0px
+              ) - var(--safe-area-inset-bottom, 0px)
+          );
+          margin-bottom: var(--safe-area-inset-bottom);
+          margin-right: var(--safe-area-inset-right);
           overflow-y: auto;
           overflow: auto;
           -webkit-overflow-scrolling: touch;
         }
+        :host([narrow]) .content {
+          width: calc(
+            100% - var(--safe-area-inset-left, 0px) - var(
+                --safe-area-inset-right,
+                0px
+              )
+          );
+          margin-left: var(--safe-area-inset-left);
+        }
 
         #fab {
           position: absolute;
-          right: calc(16px + var(--safe-area-inset-right));
-          inset-inline-end: calc(16px + var(--safe-area-inset-right));
+          right: calc(16px + var(--safe-area-inset-right, 0px));
+          inset-inline-end: calc(16px + var(--safe-area-inset-right, 0px));
           inset-inline-start: initial;
-          bottom: calc(16px + var(--safe-area-inset-bottom));
+          bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
           z-index: 1;
           display: flex;
           flex-wrap: wrap;
           justify-content: flex-end;
           gap: 8px;
         }
         :host([narrow]) #fab.tabs {
-          bottom: calc(84px + var(--safe-area-inset-bottom));
+          bottom: calc(84px + var(--safe-area-inset-bottom, 0px));
         }
         #fab[is-wide] {
-          bottom: 24px;
-          right: 24px;
-          inset-inline-end: 24px;
+          bottom: calc(24px + var(--safe-area-inset-bottom, 0px));
+          right: calc(24px + var(--safe-area-inset-right, 0px));
+          inset-inline-end: calc(24px + var(--safe-area-inset-right, 0px));
           inset-inline-start: initial;
         }
       `,

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

@@ -704,12 +704,24 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     }
     :host(:not([narrow])) ha-data-table,
     .pane {
-      height: calc(100vh - 1px - var(--header-height));
+      height: calc(
+        100vh -
+          1px - var(--header-height, 0px) - var(
+            --safe-area-inset-top,
+            0px
+          ) - var(--safe-area-inset-bottom, 0px)
+      );
       display: block;
     }
 
     .pane-content {
-      height: calc(100vh - 1px - var(--header-height) - var(--header-height));
+      height: calc(
+        100vh -
+          1px - var(--header-height, 0px) - var(--header-height, 0px) - var(
+            --safe-area-inset-top,
+            0px
+          ) - var(--safe-area-inset-bottom, 0px)
+      );
       display: flex;
       flex-direction: column;
     }

src/layouts/hass-tabs-subpage.ts

@@ -172,7 +172,9 @@ class HassTabsSubpage extends LitElement {
           ? html`<div id="tabbar" class="bottom-bar">${tabs}</div>`
           : ""}
       </div>
-      <div class="container">
+      <div
+        class=${classMap({ container: true, tabs: showTabs && this.narrow })}
+      >
         ${this.pane
           ? html`<div class="pane">
               <div class="shadow-container"></div>
@@ -225,11 +227,9 @@ class HassTabsSubpage extends LitElement {
 
         .container {
           display: flex;
-          height: calc(100% - var(--header-height));
-        }
-
-        :host([narrow]) .container {
-          height: 100%;
+          height: calc(
+            100% - var(--header-height, 0px) - var(--safe-area-inset-top, 0px)
+          );
         }
 
         ha-menu-button {
@@ -240,26 +240,28 @@ class HassTabsSubpage extends LitElement {
 
         .toolbar {
           font-size: var(--ha-font-size-xl);
-          height: calc(var(--header-height) + var(--safe-area-inset-top));
+          height: calc(
+            var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
+          );
           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);
           box-sizing: border-box;
         }
+        :host([narrow]) .toolbar {
+          padding-left: var(--safe-area-inset-left);
+        }
         .toolbar-content {
           padding: 8px 12px;
           display: flex;
           align-items: center;
           height: 100%;
           box-sizing: border-box;
         }
-        @media (max-width: 599px) {
-          .toolbar-content {
-            padding: 4px;
-          }
+        :host([narrow]) .toolbar-content {
+          padding: 4px;
         }
         .toolbar a {
           color: var(--sidebar-text-color);
@@ -323,53 +325,46 @@ class HassTabsSubpage extends LitElement {
 
         .content {
           position: relative;
-          width: calc(
-            100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)
-          );
-          margin-left: var(--safe-area-inset-left);
+          width: 100%;
           margin-right: var(--safe-area-inset-right);
-          margin-inline-start: var(--safe-area-inset-left);
           margin-inline-end: var(--safe-area-inset-right);
+          margin-bottom: var(--safe-area-inset-bottom);
           overflow: auto;
           -webkit-overflow-scrolling: touch;
         }
-
         :host([narrow]) .content {
-          height: calc(100% - var(--header-height));
-          height: calc(
-            100% - var(--header-height) - var(--safe-area-inset-bottom)
-          );
+          margin-left: var(--safe-area-inset-left);
+          margin-inline-start: var(--safe-area-inset-left);
         }
-
         :host([narrow]) .content.tabs {
-          height: calc(100% - 2 * var(--header-height));
-          height: calc(
-            100% - 2 * var(--header-height) - var(--safe-area-inset-bottom)
+          /* Bottom bar reuses header height */
+          margin-bottom: calc(
+            var(--header-height, 0px) + var(--safe-area-inset-bottom, 0px)
           );
         }
 
         .content .fab-bottom-space {
-          height: calc(64px + var(--safe-area-inset-bottom));
+          height: calc(64px + var(--safe-area-inset-bottom, 0px));
         }
 
         :host([narrow]) .content.tabs .fab-bottom-space {
-          height: calc(80px + var(--safe-area-inset-bottom));
+          height: calc(80px + var(--safe-area-inset-bottom, 0px));
         }
 
         #fab {
           position: fixed;
-          right: calc(16px + var(--safe-area-inset-right));
+          right: calc(16px + var(--safe-area-inset-right, 0px));
           inset-inline-end: calc(16px + var(--safe-area-inset-right));
           inset-inline-start: initial;
-          bottom: calc(16px + var(--safe-area-inset-bottom));
+          bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
           z-index: 1;
           display: flex;
           flex-wrap: wrap;
           justify-content: flex-end;
           gap: 8px;
         }
         :host([narrow]) #fab.tabs {
-          bottom: calc(84px + var(--safe-area-inset-bottom));
+          bottom: calc(84px + var(--safe-area-inset-bottom, 0px));
         }
         #fab[is-wide] {
           bottom: 24px;

src/panels/calendar/ha-panel-calendar.ts

@@ -114,7 +114,11 @@ class PanelCalendar extends LitElement {
     );
     const showPane = this._showPaneController.value ?? !this.narrow;
     return html`
-      <ha-two-pane-top-app-bar-fixed .pane=${showPane} footer>
+      <ha-two-pane-top-app-bar-fixed
+        .pane=${showPane}
+        footer
+        .narrow=${this.narrow}
+      >
         <ha-menu-button
           slot="navigationIcon"
           .hass=${this.hass}
@@ -294,10 +298,15 @@ class PanelCalendar extends LitElement {
           display: block;
         }
         ha-full-calendar {
-          height: calc(100vh - var(--header-height));
           --calendar-header-padding: 12px;
           --calendar-border-radius: 0;
           --calendar-border-width: 1px 0;
+          height: calc(
+            100vh - var(--header-height, 0px) - var(
+                --safe-area-inset-top,
+                0px
+              ) - var(--safe-area-inset-bottom, 0px)
+          );
         }
         ha-button-menu ha-button {
           --ha-font-size-m: var(--ha-font-size-l);

src/panels/config/automation/blueprint-automation-editor.ts

@@ -94,11 +94,25 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
         :host {
           position: relative;
           height: 100%;
-          min-height: calc(100vh - 85px);
-          min-height: calc(100dvh - 85px);
+          min-height: calc(
+            100vh -
+              134px - var(--safe-area-inset-top, 0px) - var(
+                --safe-area-inset-bottom,
+                0px
+              )
+          );
+          min-height: calc(
+            100dvh -
+              134px - var(--safe-area-inset-top, 0px) - var(
+                --safe-area-inset-bottom,
+                0px
+              )
+          );
         }
         ha-fab {
           position: fixed;
+          bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
+          right: calc(16px + var(--safe-area-inset-right, 0px));
         }
       `,
     ];

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

@@ -1214,12 +1214,12 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
         }
         ha-fab {
           position: fixed;
-          right: 16px;
+          right: calc(16px + var(--safe-area-inset-right, 0px));
           bottom: calc(-80px - var(--safe-area-inset-bottom));
           transition: bottom 0.3s;
         }
         ha-fab.dirty {
-          bottom: 16px;
+          bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
         }
       `,
     ];