diff --git a/src/components/ha-resizable-bottom-sheet.ts b/src/components/ha-resizable-bottom-sheet.ts
index e915d6f113..dac9ec2a5d 100644
--- a/src/components/ha-resizable-bottom-sheet.ts
+++ b/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({
-        height: this._dialogViewportHeight
-          ? `${this._dialogViewportHeight}vh`
-          : "auto",
-        maxHeight: `${this._dialogMaxViewpointHeight}vh`,
-        minHeight: `${this._dialogMinViewpointHeight}vh`,
-      })}
+      style=${`
+        --height: ${this._dialogViewportHeight}vh;
+        --height: ${this._dialogViewportHeight}dvh;
+        --max-height: ${this._dialogMaxViewpointHeight}vh;
+        --max-height: ${this._dialogMaxViewpointHeight}dvh;
+        --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;
-      max-height: 70vh;
-      min-height: 30vh;
+      height: var(--height, auto);
+      max-height: var(--max-height, 70vh);
+      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);
     }
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index 7eb7f5bedb..c55bad849a 100644
--- a/src/layouts/hass-subpage.ts
+++ b/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;
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index deb5439e19..d928c1cd51 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/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;
diff --git a/src/panels/config/automation/ha-automation-sidebar.ts b/src/panels/config/automation/ha-automation-sidebar.ts
index 50b32097af..432309a26e 100644
--- a/src/panels/config/automation/ha-automation-sidebar.ts
+++ b/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(
-        100% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom)
-      );
+      height: calc(100% - var(--safe-area-inset-top, 0px));
       --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) {
diff --git a/src/panels/config/automation/styles.ts b/src/panels/config/automation/styles.ts
index b2cea2a01e..abc4b3711e 100644
--- a/src/panels/config/automation/styles.ts
+++ b/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(
-      -81px +
-        100dvh - var(--safe-area-inset-top, 0px) - var(
-          --safe-area-inset-bottom,
-          0px
-        )
-    );
+    height: calc(-81px + 100vh - var(--safe-area-inset-top, 0px));
+    height: calc(-81px + 100dvh - var(--safe-area-inset-top, 0px));
     width: var(--sidebar-width);
     display: block;
   }
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index aa22ff0731..53fc8c52b4 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/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%;