diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 218538979b..e20c2214b2 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -139,7 +139,9 @@ export class HaDialog extends DialogBase {
       @media all and (max-width: 450px), all and (max-height: 500px) {
         .mdc-dialog .mdc-dialog__surface {
           min-height: 100vh;
+          min-height: 100svh;
           max-height: 100vh;
+          max-height: 100svh;
           padding-top: var(--safe-area-inset-top);
           padding-bottom: var(--safe-area-inset-bottom);
           padding-left: var(--safe-area-inset-left);
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index 8eeab3deb7..31b4fa899e 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -157,8 +157,10 @@ export const haStyleDialog = css`
     ha-dialog {
       --mdc-dialog-min-width: 100vw;
       --mdc-dialog-max-width: 100vw;
-      --mdc-dialog-min-height: 100%;
-      --mdc-dialog-max-height: 100%;
+      --mdc-dialog-min-height: 100vh;
+      --mdc-dialog-min-height: 100svh;
+      --mdc-dialog-max-height: 100vh;
+      --mdc-dialog-max-height: 100svh;
       --vertical-align-dialog: flex-end;
       --ha-dialog-border-radius: 0;
     }