From dab89a7dc1c8b6884cbb1965a32644c6bc7f0b0d Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Mon, 6 Jan 2025 17:29:54 +0000 Subject: [PATCH] fix: ios nav-stack height --- .../components/nav-stack/nav-stack.component.global.scss | 2 +- src/theme/variables.scss | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/feature/nav-stack/components/nav-stack/nav-stack.component.global.scss b/src/app/feature/nav-stack/components/nav-stack/nav-stack.component.global.scss index fd1dc4c2d..736e01659 100644 --- a/src/app/feature/nav-stack/components/nav-stack/nav-stack.component.global.scss +++ b/src/app/feature/nav-stack/components/nav-stack/nav-stack.component.global.scss @@ -20,7 +20,7 @@ ion-modal.nav-stack-modal { &::part(content) { border-radius: var(--border-radius) var(--border-radius) 0 0; position: absolute; - bottom: 0px; + bottom: calc(0px + var(--ion-safe-area-bottom, 0)); } ion-toolbar { diff --git a/src/theme/variables.scss b/src/theme/variables.scss index cc1e5a15f..d7d734cad 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -18,8 +18,10 @@ /** Ionic CSS Variables **/ :root { - // The total height of the central safe area of the device viewport - --safe-area-height: calc(100vh - var(--ion-safe-area-top, 0) - var(--ion-safe-area-bottom, 0)); + // The total height of the central safe area of the device viewport. + // Use 100% rather than 100vh to handle browsers with toolbars, + // see https://github.com/IDEMSInternational/open-app-builder/issues/2680 + --safe-area-height: calc(100% - var(--ion-safe-area-top, 0) - var(--ion-safe-area-bottom, 0)); // Margins // --row-margin-top: 1em; // used in downstream calculations, e.g. sticky display-group