fix: Fixed issue where moving the floating keyboard on iPad would lead to blank space on screen

packages/mobile/src/MobileWebAppContainer.tsx

@@ -2,7 +2,7 @@
 
 import { ApplicationEvent, ReactNativeToWebEvent } from '@standardnotes/snjs'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, Keyboard, Platform, Text, View } from 'react-native'
+import { Button, Dimensions, Keyboard, Platform, Text, View } from 'react-native'
 import VersionInfo from 'react-native-version-info'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
 import { OnShouldStartLoadWithRequest } from 'react-native-webview/lib/WebViewTypes'
@@ -84,7 +84,11 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
         JSON.stringify({
           reactNativeEvent: ReactNativeToWebEvent.KeyboardFrameWillChange,
           messageType: 'event',
-          messageData: { height: e.endCoordinates.height, contentHeight: e.endCoordinates.screenY },
+          messageData: {
+            height: e.endCoordinates.height,
+            contentHeight: e.endCoordinates.screenY,
+            isFloatingKeyboard: e.endCoordinates.width !== Dimensions.get('window').width,
+          },
         }),
       )
     })

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

@@ -14,7 +14,11 @@ export interface WebApplicationInterface extends ApplicationInterface {
   handleMobileLosingFocusEvent(): Promise<void>
   handleMobileResumingFromBackgroundEvent(): Promise<void>
   handleMobileColorSchemeChangeEvent(): void
-  handleMobileKeyboardWillChangeFrameEvent(frame: { height: number; contentHeight: number }): void
+  handleMobileKeyboardWillChangeFrameEvent(frame: {
+    height: number
+    contentHeight: number
+    isFloatingKeyboard: boolean
+  }): void
   handleMobileKeyboardDidChangeFrameEvent(frame: { height: number; contentHeight: number }): void
   handleReceivedFileEvent(file: { name: string; mimeType: string; data: string }): void
   handleReceivedTextEvent(item: { text: string; title?: string }): Promise<void>

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

@@ -373,10 +373,17 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     void this.getThemeService().handleMobileColorSchemeChangeEvent()
   }
 
-  handleMobileKeyboardWillChangeFrameEvent(frame: { height: number; contentHeight: number }): void {
+  handleMobileKeyboardWillChangeFrameEvent(frame: {
+    height: number
+    contentHeight: number
+    isFloatingKeyboard: boolean
+  }): void {
     if (frame.contentHeight > 0) {
       setCustomViewportHeight(frame.contentHeight, 'px', true)
     }
+    if (frame.isFloatingKeyboard) {
+      setCustomViewportHeight(100, 'vh', true)
+    }
     this.notifyWebEvent(WebAppEvent.MobileKeyboardWillChangeFrame, frame)
   }
 

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

@@ -75,7 +75,7 @@ export class MobileWebReceiver {
         break
       case ReactNativeToWebEvent.KeyboardFrameWillChange:
         void this.application.handleMobileKeyboardWillChangeFrameEvent(
-          messageData as { height: number; contentHeight: number },
+          messageData as { height: number; contentHeight: number; isFloatingKeyboard: boolean },
         )
         break
       case ReactNativeToWebEvent.KeyboardFrameDidChange: