Safe area: containers and panels (#26971)

This commit squashes the following development history:

1e78af3aa - Restore, moved to #26969
d672d9f44 - Restore
53ee5fbbc - Restore
16b4eb98e - Restore
8d8b13f50 - Restore
62e16619d - Apply changes from #27003
f5ee79a47 - Fix
60678689c - Fix
766ed6a25 - Fix
f76bd4f7e - Fix fabs
1879fd0d9 - Fix
ea3ee6de5 - Add safe areas to ha-hanel-custom
aa3384b9a - Add missing
c9a7f76dc - Fix
78351fd1f - Fix
59789d379 - Fix
1c7aabd34 - Remove
eaf1373cf - Fix
8481a93d7 - Fix
fe7df1f2f - Remove
69f244ff3 - Restore
2eb936b64 - Adjust
b09350637 - Fix
c0504bb7e - Clean
b0773d73e - Fix
4caa4a43b - make sure narrow is passed
8885f6bf6 - Add safe areas to 2 pane fixed
62df70f63 - Clean
a87e68d87 - FIx
5086be030 - Fix energy
ac3478e54 - Fix
0f28098a6 - Restore
b65ba3df9 - Restore
b0e1ea6db - Restore
7bb78d1c7 - Fix
26c95df71 - Update
7369c79d3 - Remove
b5f31dad6 - Fix
40cfc437d - Set top level padding instead of individual panels
83b49729f - Restore
25db15816 - Fix
8c9c39827 - Set top level app bar padding instead of individual panels
b7a1b27c9 - Remove
1e9368705 - Device
1482502f9 - Integration page
98dc1bf56 - Fix
1c3de1376 - Add
a08bee4d8 - Remove
0d462439b - Area subpage
4bfd60875 - Areas fix
b5cbcdaf7 - Fix
9fb272074 - Add safe areas to script editor
7c3bc9433 - Add safe areas to scene editor
1cf1b999a - Fix mobile for automation editors
4413bd4b7 - Add safe areas to automation editor
2e6953327 - Add safe areas to blueprint editor
989776dd1 - Add config section padding
6692b7ccf - Fix header row
22337b5e2 - Fix calendar
414e058cd - Fix pane
f09ae0e0c - Fix calendar
fb5a984ee - Fix pane
1daee18c8 - Todo fab
6f52cb42b - Todo content
9b317c583 - Media browser
0f8ca248d - Fix history panel
cd7843799 - Fix logbook
b8d47ecf3 - Fix
d15e9311d - 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

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

@@ -148,19 +148,36 @@ 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;
@@ -168,12 +185,12 @@ class HassSubpage extends LitElement {
           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

@@ -173,7 +173,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>
@@ -226,11 +228,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 {
@@ -241,15 +241,19 @@ 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;
@@ -257,10 +261,8 @@ class HassTabsSubpage extends LitElement {
           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);
@@ -324,45 +326,38 @@ 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;
@@ -370,7 +365,7 @@ class HassTabsSubpage extends LitElement {
           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));
         }
       `,
     ];

src/panels/config/automation/styles.ts

@@ -92,12 +92,12 @@ export const saveFabStyles = css`
   }
   ha-fab {
     position: absolute;
-    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));
   }
 `;
 
@@ -126,7 +126,7 @@ export const manualEditorStyles = css`
     transition: bottom 0.3s;
   }
   .fab-positioner ha-fab.dirty {
-    bottom: 16px;
+    bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
   }
 
   .content-wrapper {

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

@@ -118,6 +118,7 @@ class HaConfigSystemNavigation extends LitElement {
         .hass=${this.hass}
         back-path="/config"
         .header=${this.hass.localize("ui.panel.config.dashboard.system.main")}
+        .narrow=${this.narrow}
       >
         <ha-icon-button
           slot="toolbar-icon"

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

@@ -212,7 +212,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
       this._repairsIssues;
 
     return html`
-      <ha-top-app-bar-fixed>
+      <ha-top-app-bar-fixed .narrow=${this.narrow}>
         <ha-menu-button
           slot="navigationIcon"
           .hass=${this.hass}
@@ -386,17 +386,16 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
     return [
       haStyle,
       css`
-        ha-card:last-child {
-          margin-bottom: var(--safe-area-inset-bottom);
-        }
         :host(:not([narrow])) ha-card:last-child {
-          margin-bottom: max(24px, var(--safe-area-inset-bottom));
+          margin-bottom: 24px;
         }
+
         ha-config-section {
           margin: auto;
           margin-top: -32px;
           max-width: 600px;
         }
+
         ha-card {
           overflow: hidden;
         }
@@ -404,9 +403,11 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
           text-decoration: none;
           color: var(--primary-text-color);
         }
+
         ha-assist-chip {
           margin: 8px 16px 16px 16px;
         }
+
         .title {
           font-size: var(--ha-font-size-l);
           padding: 16px;
@@ -425,7 +426,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
         }
 
         ha-tip {
-          margin-bottom: max(var(--safe-area-inset-bottom), 8px);
+          margin-bottom: 8px;
         }
 
         .new {

src/panels/config/devices/ha-config-device-page.ts

@@ -1489,6 +1489,9 @@ export class HaConfigDevicePage extends LitElement {
           margin-top: 32px;
           margin-bottom: 32px;
         }
+        :host([narrow]) .container {
+          margin-top: 0;
+        }
 
         .card-header {
           display: flex;
@@ -1588,10 +1591,6 @@ export class HaConfigDevicePage extends LitElement {
           width: 100%;
         }
 
-        :host([narrow]) .container {
-          margin-top: 0;
-        }
-
         a {
           text-decoration: none;
           color: var(--primary-color);

src/panels/config/ha-config-section.ts

@@ -38,6 +38,7 @@ export class HaConfigSection extends LitElement {
     :host {
       display: block;
     }
+
     .content {
       padding: 28px 20px 0;
       max-width: 1040px;

src/panels/config/integrations/ha-config-integration-page.ts

@@ -912,6 +912,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
           max-width: 1000px;
           padding: 32px;
         }
+        :host([narrow]) .container {
+          padding: 16px;
+        }
         .container > * {
           flex-grow: 1;
         }
@@ -952,9 +955,6 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         .card-content {
           padding: 16px 0 8px;
         }
-        :host([narrow]) .container {
-          padding: 16px;
-        }
         .card-header {
           padding-bottom: 0;
         }

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

@@ -66,6 +66,8 @@ export class HaBlueprintScriptEditor extends HaBlueprintGenericEditor {
         }
         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/script/ha-script-editor.ts

@@ -1139,7 +1139,7 @@ export class HaScriptEditor extends SubscribeMixin(
           transition: bottom 0.3s;
         }
         ha-fab.dirty {
-          bottom: 16px;
+          bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
         }
         li[role="separator"] {
           border-bottom-color: var(--divider-color);

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

@@ -147,10 +147,19 @@ export class HaPanelCustom extends ReactiveElement {
       <style>
         iframe {
           border: 0;
-          width: 100%;
-          height: 100%;
+          width: calc(100% - var(--safe-area-inset-right, 0px));
+          height: calc(100% - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px));
           display: block;
           background-color: var(--primary-background-color);
+          margin-top: var(--safe-area-inset-top);
+          margin-bottom: var(--safe-area-inset-bottom);
+          margin-right: var(--safe-area-inset-right);
+        }
+        @media (max-width: 870px) {
+          iframe {
+            width: calc(100% - var(--safe-area-inset-left, 0px) - var(--safe-area-inset-right, 0px));
+            margin-left: var(--safe-area-inset-left);
+          }
         }
       </style>
       <iframe ${titleAttr}></iframe>`.trim();

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

@@ -496,7 +496,12 @@ class PanelEnergy extends LitElement {
           border-bottom: var(--app-header-border-bottom, none);
           position: fixed;
           top: 0;
-          width: var(--mdc-top-app-bar-width, 100%);
+          width: calc(
+            var(--mdc-top-app-bar-width, 100%) - var(
+                --safe-area-inset-right,
+                0px
+              )
+          );
           padding-top: var(--safe-area-inset-top);
           z-index: 4;
           transition: box-shadow 200ms linear;
@@ -504,6 +509,17 @@ class PanelEnergy extends LitElement {
           flex-direction: row;
           -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-right: var(--safe-area-inset-right);
+        }
+        :host([narrow]) .header {
+          width: calc(
+            var(--mdc-top-app-bar-width, 100%) - var(
+                --safe-area-inset-left,
+                0px
+              ) - var(--safe-area-inset-right, 0px)
+          );
+          padding-left: var(--safe-area-inset-left);
         }
         :host([scrolled]) .header {
           box-shadow: var(
@@ -523,10 +539,8 @@ class PanelEnergy extends LitElement {
           font-weight: var(--ha-font-weight-normal);
           box-sizing: border-box;
         }
-        @media (max-width: 599px) {
-          .toolbar {
-            padding: 0 4px;
-          }
+        :host([narrow]) .toolbar {
+          padding: 0 4px;
         }
         .main-title {
           margin: var(--margin-title);
@@ -539,12 +553,14 @@ class PanelEnergy extends LitElement {
           min-height: 100vh;
           box-sizing: border-box;
           padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
-          padding-left: var(--safe-area-inset-left);
           padding-right: var(--safe-area-inset-right);
-          padding-inline-start: var(--safe-area-inset-left);
           padding-inline-end: var(--safe-area-inset-right);
           padding-bottom: var(--safe-area-inset-bottom);
         }
+        :host([narrow]) hui-view-container {
+          padding-left: var(--safe-area-inset-left);
+          padding-inline-start: var(--safe-area-inset-left);
+        }
         hui-view {
           flex: 1 1 100%;
           max-width: 100%;

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

@@ -120,7 +120,7 @@ class HaPanelHistory extends LitElement {
   protected render() {
     const entitiesSelected = this._getEntityIds().length > 0;
     return html`
-      <ha-top-app-bar-fixed>
+      <ha-top-app-bar-fixed .narrow=${this.narrow}>
         ${this._showBack
           ? html`
               <ha-icon-button-arrow-prev
@@ -620,7 +620,6 @@ class HaPanelHistory extends LitElement {
 
         .content {
           padding: 0 16px 16px;
-          padding-bottom: max(var(--safe-area-inset-bottom), 16px);
         }
 
         :host([virtualize]) {

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

@@ -69,7 +69,7 @@ export class HaPanelLogbook extends LitElement {
 
   protected render() {
     return html`
-      <ha-top-app-bar-fixed>
+      <ha-top-app-bar-fixed .narrow=${this.narrow}>
         ${this._showBack
           ? html`
               <ha-icon-button-arrow-prev
@@ -303,11 +303,23 @@ export class HaPanelLogbook extends LitElement {
       haStyle,
       css`
         ha-logbook {
-          height: calc(100vh - 136px);
+          height: calc(
+            100vh -
+              168px - var(--safe-area-inset-top, 0px) - var(
+                --safe-area-inset-bottom,
+                0px
+              )
+          );
         }
 
         :host([narrow]) ha-logbook {
-          height: calc(100vh - 198px);
+          height: calc(
+            100vh -
+              250px - var(--safe-area-inset-top, 0px) - var(
+                --safe-area-inset-bottom,
+                0px
+              )
+          );
         }
 
         ha-date-range-picker {

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

@@ -157,6 +157,7 @@ export class LovelacePanel extends LitElement {
     if (panelState === "yaml-editor") {
       return html`
         <hui-editor
+          .narrow=${this.narrow}
           .hass=${this.hass}
           .lovelace=${this.lovelace}
           .closeEditor=${this._closeEditor}

src/panels/lovelace/hui-editor.ts

@@ -36,6 +36,8 @@ const strategyStruct = type({
 
 @customElement("hui-editor")
 class LovelaceFullConfigEditor extends LitElement {
+  @property({ type: Boolean }) public narrow = false;
+
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public lovelace?: Lovelace;
@@ -48,7 +50,7 @@ class LovelaceFullConfigEditor extends LitElement {
 
   protected render(): TemplateResult | undefined {
     return html`
-      <ha-top-app-bar-fixed>
+      <ha-top-app-bar-fixed .narrow=${this.narrow}>
         <ha-icon-button
           slot="navigationIcon"
           .path=${mdiClose}

src/panels/lovelace/hui-root.ts

@@ -1217,20 +1217,28 @@ class HUIRoot extends LitElement {
           border-bottom: var(--app-header-border-bottom, none);
           position: fixed;
           top: 0;
-          width: var(
-            --mdc-top-app-bar-width,
-            calc(
-              100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)
-            )
+          width: calc(
+            var(--mdc-top-app-bar-width, 100%) - var(
+                --safe-area-inset-right,
+                0px
+              )
           );
           -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;
         }
+        .narrow .header {
+          width: calc(
+            var(--mdc-top-app-bar-width, 100%) - var(
+                --safe-area-inset-left,
+                0px
+              ) - var(--safe-area-inset-right, 0px)
+          );
+          padding-left: var(--safe-area-inset-left);
+        }
         :host([scrolled]) .header {
           box-shadow: var(
             --mdc-top-app-bar-fixed-box-shadow,
@@ -1252,10 +1260,8 @@ class HUIRoot extends LitElement {
           font-weight: var(--ha-font-weight-normal);
           box-sizing: border-box;
         }
-        @media (max-width: 599px) {
-          .toolbar {
-            padding: 0 4px;
-          }
+        .narrow .toolbar {
+          padding: 0 4px;
         }
         .main-title {
           margin: var(--margin-title);
@@ -1390,12 +1396,14 @@ class HUIRoot extends LitElement {
           min-height: 100vh;
           box-sizing: border-box;
           padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
-          padding-left: var(--safe-area-inset-left);
           padding-right: var(--safe-area-inset-right);
-          padding-inline-start: var(--safe-area-inset-left);
           padding-inline-end: var(--safe-area-inset-right);
           padding-bottom: var(--safe-area-inset-bottom);
         }
+        .narrow hui-view-container {
+          padding-left: var(--safe-area-inset-left);
+          padding-inline-start: var(--safe-area-inset-left);
+        }
         hui-view-container > * {
           flex: 1 1 100%;
           max-width: 100%;

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

@@ -21,7 +21,7 @@ class HaPanelMap extends LitElement {
 
   protected render() {
     return html`
-      <ha-top-app-bar-fixed>
+      <ha-top-app-bar-fixed .narrow=${this.narrow}>
         <ha-menu-button
           slot="navigationIcon"
           .hass=${this.hass}

src/panels/media-browser/ha-bar-media-player.ts

@@ -560,7 +560,10 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
         var(--card-background-color, white)
       );
       border-top: 1px solid var(--divider-color);
-      padding-bottom: var(--safe-area-inset-bottom);
+      margin-right: var(--safe-area-inset-right);
+    }
+    :host([narrow]) {
+      margin-left: var(--safe-area-inset-left);
     }
 
     mwc-linear-progress {

src/panels/media-browser/ha-panel-media-browser.ts

@@ -92,7 +92,7 @@ class PanelMediaBrowser extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-top-app-bar-fixed>
+      <ha-top-app-bar-fixed .narrow=${this.narrow}>
         ${this._navigateIds.length > 1
           ? html`
               <ha-icon-button-arrow-prev
@@ -349,19 +349,48 @@ class PanelMediaBrowser extends LitElement {
         }
 
         ha-media-player-browse {
-          height: calc(100vh - (100px + var(--header-height)));
+          height: calc(
+            100vh -
+              (
+                100px + var(--header-height, 0px) +
+                  var(--safe-area-inset-top, 0px) +
+                  var(--safe-area-inset-bottom, 0px)
+              )
+          );
         }
 
         :host([narrow]) ha-media-player-browse {
-          height: calc(100vh - (57px + var(--header-height)));
+          height: calc(
+            100vh -
+              (
+                68px + var(--header-height, 0px) +
+                  var(--safe-area-inset-top, 0px) +
+                  var(--safe-area-inset-bottom, 0px)
+              )
+          );
         }
+
         .selected_menu_item {
           color: var(--primary-color);
         }
 
         ha-bar-media-player {
           position: fixed;
-          width: var(--mdc-top-app-bar-width, 100%);
+          bottom: var(--safe-area-inset-bottom, 0px);
+          width: calc(
+            var(--mdc-top-app-bar-width, 100%) - var(
+                --safe-area-inset-right,
+                0px
+              )
+          );
+        }
+        :host([narrow]) ha-bar-media-player {
+          width: calc(
+            var(--mdc-top-app-bar-width, 100%) - var(
+                --safe-area-inset-left,
+                0px
+              ) - var(--safe-area-inset-right, 0px)
+          );
         }
       `,
     ];

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

@@ -165,7 +165,11 @@ class PanelTodo extends LitElement {
         </ha-list-item> `
     );
     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}
@@ -403,9 +407,9 @@ class PanelTodo extends LitElement {
         }
         ha-fab {
           position: fixed;
-          right: 16px;
-          bottom: 16px;
-          inset-inline-end: 16px;
+          right: calc(16px + var(--safe-area-inset-right, 0px));
+          bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
+          inset-inline-end: calc(16px + var(--safe-area-inset-right, 0px));
           inset-inline-start: initial;
         }
       `,