chore: handle safe area insets better on android (skip e2e)

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

@@ -361,6 +361,12 @@ 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/Components/ContentListView/FloatingAddButton.tsx

@@ -1,6 +1,7 @@
 import { classNames } from '@standardnotes/snjs'
 import { ButtonStyle, getColorsForPrimaryVariant } from '../Button/Button'
 import Icon from '../Icon/Icon'
+import { useAvailableSafeAreaPadding } from '@/Hooks/useSafeAreaPadding'
 
 type Props = {
   label: string
@@ -14,12 +15,15 @@ const PropertiesRequiredForFixedPositioningToWorkOnIOSSafari: React.CSSPropertie
 
 const FloatingAddButton = ({ label, style, onClick }: Props) => {
   const buttonClasses = getColorsForPrimaryVariant(style)
+  const { hasBottomInset } = useAvailableSafeAreaPadding()
+
   return (
     <button
       className={classNames(
-        'fixed bottom-6 right-6 z-editor-title-bar ml-3 flex h-15 w-15 cursor-pointer items-center',
+        'fixed right-6 z-editor-title-bar ml-3 flex h-15 w-15 cursor-pointer items-center',
         `justify-center rounded-full border border-solid border-transparent ${buttonClasses}`,
         'hover:brightness-125',
+        hasBottomInset ? 'bottom-[calc(var(--safe-area-inset-bottom)+0.5rem)]' : 'bottom-6',
       )}
       title={label}
       aria-label={label}

packages/web/src/javascripts/Hooks/useSafeAreaPadding.ts

@@ -1,3 +1,7 @@
+import { ReactNativeToWebEvent } from '@standardnotes/snjs'
+import { useApplication } from '@/Components/ApplicationProvider'
+import { useEffect, useState } from 'react'
+
 export const useAvailableSafeAreaPadding = () => {
   const documentStyle = getComputedStyle(document.documentElement)
 
@@ -6,10 +10,22 @@ export const useAvailableSafeAreaPadding = () => {
   const bottom = parseInt(documentStyle.getPropertyValue('--safe-area-inset-bottom'))
   const left = parseInt(documentStyle.getPropertyValue('--safe-area-inset-left'))
 
+  const application = useApplication()
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false)
+  useEffect(() => {
+    return application.addNativeMobileEventListener((event) => {
+      if (event === ReactNativeToWebEvent.KeyboardDidShow) {
+        setIsKeyboardVisible(true)
+      } else if (event === ReactNativeToWebEvent.KeyboardDidHide) {
+        setIsKeyboardVisible(false)
+      }
+    })
+  }, [application])
+
   return {
     hasTopInset: !!top,
     hasRightInset: !!right,
-    hasBottomInset: !!bottom,
+    hasBottomInset: !!bottom && !isKeyboardVisible,
     hasLeftInset: !!left,
   }
 }

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

@@ -81,6 +81,11 @@ 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 {