Safe area: fix dashboard and devtools header safe areas

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

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

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