Fix automation editor safe area (#27292)

src/components/ha-resizable-bottom-sheet.ts

@@ -1,6 +1,5 @@
 import { css, html, LitElement } from "lit";
 import { customElement, query, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../common/dom/fire_event";
 import { BOTTOM_SHEET_ANIMATION_DURATION_MS } from "./ha-bottom-sheet";
 
@@ -37,13 +36,14 @@ export class HaResizableBottomSheet extends LitElement {
     return html`<dialog
       open
       @transitionend=${this._handleTransitionEnd}
-      style=${styleMap({
+      style=${`
-        height: this._dialogViewportHeight
+        --height: ${this._dialogViewportHeight}vh;
-          ? `${this._dialogViewportHeight}vh`
+        --height: ${this._dialogViewportHeight}dvh;
-          : "auto",
+        --max-height: ${this._dialogMaxViewpointHeight}vh;
-        maxHeight: `${this._dialogMaxViewpointHeight}vh`,
+        --max-height: ${this._dialogMaxViewpointHeight}dvh;
-        minHeight: `${this._dialogMinViewpointHeight}vh`,
+        --min-height: ${this._dialogMinViewpointHeight}vh;
-      })}
+        --min-height: ${this._dialogMinViewpointHeight}dvh;
+      `}
     >
       <div class="handle-wrapper">
         <div
@@ -213,9 +213,11 @@ export class HaResizableBottomSheet extends LitElement {
       cursor: grabbing;
     }
     dialog {
-      height: auto;
+      height: var(--height, auto);
-      max-height: 70vh;
+      max-height: var(--max-height, 70vh);
-      min-height: 30vh;
+      max-height: var(--max-height, 70dvh);
+      min-height: var(--min-height, 30vh);
+      min-height: var(--min-height, 30dvh);
       background-color: var(
         --ha-bottom-sheet-surface-background,
         var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
@@ -254,7 +256,6 @@ export class HaResizableBottomSheet extends LitElement {
       border-bottom-width: 0;
       border-style: var(--ha-bottom-sheet-border-style);
       border-color: var(--ha-bottom-sheet-border-color);
-      margin-bottom: var(--safe-area-inset-bottom);
       margin-left: var(--safe-area-inset-left);
       margin-right: var(--safe-area-inset-right);
     }

src/layouts/hass-subpage.ts

@@ -5,8 +5,8 @@ import { restoreScroll } from "../common/decorators/restore-scroll";
 import { goBack } from "../common/navigate";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
-import type { HomeAssistant } from "../types";
 import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
 
 @customElement("hass-subpage")
 class HassSubpage extends LitElement {
@@ -154,9 +154,15 @@ class HassSubpage extends LitElement {
               1px - var(--header-height, 0px) - var(
                 --safe-area-inset-top,
                 0px
-              ) - var(--safe-area-inset-bottom, 0px)
+              ) - var(
+                --hass-subpage-bottom-inset,
+                var(--safe-area-inset-bottom, 0px)
+              )
+          );
+          margin-bottom: var(
+            --hass-subpage-bottom-inset,
+            var(--safe-area-inset-bottom)
           );
-          margin-bottom: var(--safe-area-inset-bottom);
           margin-right: var(--safe-area-inset-right);
           overflow-y: auto;
           overflow: auto;

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

@@ -74,8 +74,10 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info
 import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
+import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { Entries, HomeAssistant, Route } from "../../../types";
+import { isMac } from "../../../util/is_mac";
 import { showToast } from "../../../util/toast";
 import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
 import "../ha-config-section";
@@ -87,8 +89,6 @@ import {
 import "./blueprint-automation-editor";
 import "./manual-automation-editor";
 import type { HaManualAutomationEditor } from "./manual-automation-editor";
-import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
-import { isMac } from "../../../util/is_mac";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -1257,6 +1257,7 @@ export class HaAutomationEditor extends UndoRedoMixin<
             --ha-automation-editor-width,
             1540px
           );
+          --hass-subpage-bottom-inset: 0px;
         }
         ha-fade-in {
           display: flex;

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

@@ -292,9 +292,7 @@ export default class HaAutomationSidebar extends LitElement {
     :host {
       z-index: 6;
       outline: none;
-      height: calc(
+      height: calc(100% - var(--safe-area-inset-top, 0px));
-        100% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom)
-      );
       --ha-card-border-radius: var(
         --ha-dialog-border-radius,
         var(--ha-border-radius-2xl)
@@ -304,7 +302,6 @@ export default class HaAutomationSidebar extends LitElement {
       --ha-bottom-sheet-border-style: solid;
       --ha-bottom-sheet-border-color: var(--primary-color);
       margin-top: var(--safe-area-inset-top);
-      margin-bottom: var(--safe-area-inset-bottom);
     }
 
     @media all and (max-width: 870px) {

src/panels/config/automation/styles.ts

@@ -145,24 +145,19 @@ export const manualEditorStyles = css`
 
   .content {
     padding-top: 24px;
-    padding-bottom: 72px;
+    padding-bottom: max(var(--safe-area-inset-bottom), 32px);
     transition: padding-bottom 180ms ease-in-out;
   }
 
   .content.has-bottom-sheet {
-    padding-bottom: calc(90vh - 72px);
+    padding-bottom: calc(90vh - max(var(--safe-area-inset-bottom), 32px));
   }
 
   ha-automation-sidebar {
     position: fixed;
     top: calc(var(--header-height) + 16px);
-    height: calc(
+    height: calc(-81px + 100vh - var(--safe-area-inset-top, 0px));
-      -81px +
+    height: calc(-81px + 100dvh - var(--safe-area-inset-top, 0px));
-        100dvh - var(--safe-area-inset-top, 0px) - var(
-          --safe-area-inset-bottom,
-          0px
-        )
-    );
     width: var(--sidebar-width);
     display: block;
   }

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

@@ -65,8 +65,10 @@ import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { Entries, HomeAssistant, Route } from "../../../types";
+import { isMac } from "../../../util/is_mac";
 import { showToast } from "../../../util/toast";
 import { showAutomationModeDialog } from "../automation/automation-mode-dialog/show-dialog-automation-mode";
 import type { EntityRegistryUpdate } from "../automation/automation-save-dialog/show-dialog-automation-save";
@@ -75,8 +77,6 @@ import { showAssignCategoryDialog } from "../category/show-dialog-assign-categor
 import "./blueprint-script-editor";
 import "./manual-script-editor";
 import type { HaManualScriptEditor } from "./manual-script-editor";
-import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
-import { isMac } from "../../../util/is_mac";
 
 const baseEditorMixins = SubscribeMixin(
   PreventUnsavedMixin(KeyboardShortcutMixin(LitElement))
@@ -1165,6 +1165,7 @@ export class HaScriptEditor extends UndoRedoMixin<
             --ha-automation-editor-width,
             1540px
           );
+          --hass-subpage-bottom-inset: 0px;
         }
         .yaml-mode {
           height: 100%;