fix: Fixed issue with UI sometimes getting shifted up on iOS

packages/mobile/src/MobileWebAppContainer.tsx

@@ -43,6 +43,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
   const _reviewService = useRef(new ReviewService(device))
 
   const [showAndroidWebviewUpdatePrompt, setShowAndroidWebviewUpdatePrompt] = useState(false)
+  const [didLoadEnd, setDidLoadEnd] = useState(false)
 
   const insets = useSafeAreaInsets()
 
@@ -136,7 +137,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
       keyboardDidHideListener.remove()
       keyboardWillChangeFrame.remove()
     }
-  }, [webViewRef, stateService, device, androidBackHandlerService, colorSchemeService])
+  }, [webViewRef, stateService, device, androidBackHandlerService, colorSchemeService, insets.bottom])
 
   useEffect(() => {
     return notifee.onForegroundEvent(({ type, detail }) => {
@@ -354,30 +355,22 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
     }
   }, [])
 
-  const [didAppLaunch, setDidAppLaunch] = useState(false)
   useEffect(() => {
     return device.addApplicationEventReceiver((event) => {
       if (event === ApplicationEvent.Launched) {
         receivedSharedItemsHandler.current.setIsApplicationLaunched(true)
-        setDidAppLaunch(true)
       }
     })
   }, [device])
 
-  useEffect(() => {
-    if (!didAppLaunch) {
-      return
-    }
-    webViewRef.current?.postMessage(
-      JSON.stringify({
-        reactNativeEvent: ReactNativeToWebEvent.UpdateSafeAreaInsets,
-        messageType: 'event',
-        messageData: insets,
-      }),
-    )
-  }, [didAppLaunch, insets])
-
-  const [didLoadEnd, setDidLoadEnd] = useState(false)
+  const injectJS = `
+    document.documentElement.style.setProperty('--safe-area-inset-top', '${insets.top}px');
+    document.documentElement.style.setProperty('--safe-area-inset-bottom', '${insets.bottom}px');
+    document.documentElement.style.setProperty('--safe-area-inset-left', '${insets.left}px');
+    document.documentElement.style.setProperty('--safe-area-inset-right', '${insets.right}px');
+    true;
+  `
+  webViewRef.current?.injectJavaScript(injectJS)
 
   if (showAndroidWebviewUpdatePrompt) {
     return (

packages/snjs/lib/Client/ReactNativeToWebEvent.ts

@@ -10,7 +10,6 @@ export enum ReactNativeToWebEvent {
   KeyboardWillHide = 'KeyboardWillHide',
   KeyboardDidShow = 'KeyboardDidShow',
   KeyboardDidHide = 'KeyboardDidHide',
-  UpdateSafeAreaInsets = 'UpdateSafeAreaInsets',
   ReceivedFile = 'ReceivedFile',
   ReceivedLink = 'ReceivedLink',
   ReceivedText = 'ReceivedText',

packages/ui-services/src/WebApplication/WebApplicationInterface.ts

@@ -21,7 +21,6 @@ export interface WebApplicationInterface extends ApplicationInterface {
     isFloatingKeyboard: boolean
   }): void
   handleMobileKeyboardDidHideEvent(): void
-  handleUpdateSafeAreaInsets(insets: { top: number; bottom: number; left: number; right: number }): void
   handleReceivedFileEvent(file: { name: string; mimeType: string; data: string }): void
   handleReceivedTextEvent(item: { text: string; title?: string }): Promise<void>
   handleReceivedLinkEvent(item: { link: string; title: string }): Promise<void>

packages/web/src/javascripts/Application/WebApplication.ts

@@ -361,12 +361,6 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     setCustomViewportHeight(100, 'vh', true)
   }
 
-  handleUpdateSafeAreaInsets(insets: { top: number; bottom: number; left: number; right: number }) {
-    for (const [key, value] of Object.entries(insets)) {
-      document.documentElement.style.setProperty(`--safe-area-inset-${key}`, `${value}px`)
-    }
-  }
-
   handleOpenFilePreviewEvent({ id }: { id: string }): void {
     const file = this.items.findItem<FileItem>(id)
     if (!file) {

packages/web/src/javascripts/NativeMobileWeb/MobileWebReceiver.ts

@@ -81,11 +81,6 @@ export class MobileWebReceiver {
       case ReactNativeToWebEvent.KeyboardDidHide:
         void this.application.handleMobileKeyboardDidHideEvent()
         break
-      case ReactNativeToWebEvent.UpdateSafeAreaInsets:
-        void this.application.handleUpdateSafeAreaInsets(
-          messageData as { top: number; left: number; bottom: number; right: number },
-        )
-        break
       case ReactNativeToWebEvent.ReceivedFile:
         void this.application.handleReceivedFileEvent(
           messageData as {