Fix devtools header

Safe area: Fix dashboard hui-root
2025-11-10 11:30:01 +00:00 · 2025-09-09 12:00:34 +01:00 · 2025-09-09 11:55:11 +01:00
3 changed files with 19 additions and 3 deletions
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -145,7 +145,12 @@ export class HomeAssistantMain extends LitElement {
      /* remove the grey tap highlights in iOS on the fullscreen touch targets */
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      --mdc-drawer-width: calc(56px + var(--safe-area-inset-left, 0px));
-      --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
+      --mdc-top-app-bar-width: calc(
+        100% - var(--mdc-drawer-width, 0px) - var(
+            --safe-area-inset-left,
+            0px
+          ) - var(--safe-area-inset-right, 0px)
+      );
      --safe-area-content-inset-left: 0px;
      --safe-area-content-inset-right: var(--safe-area-inset-right);
    }
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -128,7 +128,15 @@ class PanelDeveloperTools extends LitElement {
          top: 0;
          z-index: 4;
          background-color: var(--app-header-background-color);
-          width: var(--mdc-top-app-bar-width, 100%);
+          width: var(
+            --mdc-top-app-bar-width,
+            calc(
+              100% - var(--safe-area-inset-left, 0px) - var(
+                  --safe-area-inset-right,
+                  0px
+                )
+            )
+          );
          padding-top: var(--safe-area-inset-top);
          padding-left: var(--safe-area-inset-left);
          padding-right: var(--safe-area-inset-right);
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -1212,7 +1212,10 @@ class HUIRoot extends LitElement {
          width: var(
            --mdc-top-app-bar-width,
            calc(
-              100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)
+              100% - var(--safe-area-inset-left, 0px) - var(
+                  --safe-area-inset-right,
+                  0px
+                )
            )
          );
          -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
Author	SHA1	Message	Date
Aidan Timson	1bf6be0b10	Fix devtools header	2025-09-09 12:00:34 +01:00
Aidan Timson	12bb32bc37	Safe area: Fix dashboard hui-root	2025-09-09 11:55:11 +01:00