From 117781bb3655a2bd6b9b0ca5a4d12f7bbefd164e Mon Sep 17 00:00:00 2001 From: Antonella Sgarlatta Date: Fri, 4 Jul 2025 06:04:55 -0300 Subject: [PATCH] fix: Fixed issue where safe area insets were not always applying properly on iOS, causing a UI shift (#2912) --- packages/mobile/src/MobileWebAppContainer.tsx | 4 +++- packages/web/src/stylesheets/_main.scss | 8 ++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx index 2e01aeebf..a31ba3789 100644 --- a/packages/mobile/src/MobileWebAppContainer.tsx +++ b/packages/mobile/src/MobileWebAppContainer.tsx @@ -370,7 +370,9 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo document.documentElement.style.setProperty('--safe-area-inset-right', '${insets.right}px'); true; ` - webViewRef.current?.injectJavaScript(injectJS) + if (Platform.OS === 'android') { + webViewRef.current?.injectJavaScript(injectJS) + } if (showAndroidWebviewUpdatePrompt) { return ( diff --git a/packages/web/src/stylesheets/_main.scss b/packages/web/src/stylesheets/_main.scss index c31f9e698..0d280c956 100644 --- a/packages/web/src/stylesheets/_main.scss +++ b/packages/web/src/stylesheets/_main.scss @@ -25,10 +25,10 @@ --reach-checkbox: 1; - --safe-area-inset-top: 0px; - --safe-area-inset-bottom: 0px; - --safe-area-inset-left: 0px; - --safe-area-inset-right: 0px; + --safe-area-inset-top: env(safe-area-inset-top, 0); + --safe-area-inset-bottom: env(safe-area-inset-bottom, 0); + --safe-area-inset-left: env(safe-area-inset-left, 0); + --safe-area-inset-right: env(safe-area-inset-right, 0); --sn-stylekit-font-size-editor: 0.9375rem;