fix(mobile): remove sheet modal bottom padding when keyboard is open on android

Author: HMarzban

packages/webapp/Helpers/documentServerSideProps.ts

@@ -40,15 +40,16 @@ export const documentServerSideProps = async (context: GetServerSidePropsContext
   const { query } = context
   const documentSlug = query.slugs?.at(0)
 
-  const { isMobile } = getDeviceInfo(context)
+  const { isMobile, os } = getDeviceInfo(context)
 
   const isTurnstileVerified = validateTurnstileAccess(context)
 
   if (!isTurnstileVerified) {
     return {
       props: {
         showTurnstile: true,
-        isMobile
+        isMobile,
+        os
       }
     }
   }
@@ -69,7 +70,8 @@ export const documentServerSideProps = async (context: GetServerSidePropsContext
         channels: channels || null,
         docMetadata,
         showTurnstile: false,
-        isMobile
+        isMobile,
+        os
       }
     }
   } catch (error: any) {

packages/webapp/Helpers/getDeviceInfo.ts

@@ -1,10 +1,14 @@
 import MobileDetect from 'mobile-detect'
 import { type GetServerSidePropsContext } from 'next'
 
-export const getDeviceInfo = (context: GetServerSidePropsContext): { isMobile: boolean } => {
+export const getDeviceInfo = (
+  context: GetServerSidePropsContext
+): { isMobile: boolean; os: string | null } => {
   const userAgent = context.req.headers['user-agent'] || ''
   const device = new MobileDetect(userAgent)
+
   return {
-    isMobile: Boolean(device.mobile())
+    isMobile: Boolean(device.mobile()),
+    os: device.os() || null
   }
 }

packages/webapp/components/BottomSheet.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { Sheet, SheetProps } from 'react-modal-sheet'
 
-import { useSheetStore, useChatStore } from '@stores'
+import { useSheetStore, useChatStore, useStore } from '@stores'
 import FilterModal from '@components/pages/document/components/FilterModal'
 import NotificationModal from './notificationPanel/mobile/NotificationModal'
 import ChatContainerMobile from './pages/document/components/chat/ChatContainerMobile'
@@ -14,6 +14,11 @@ const BottomSheet = () => {
   const destroyChatRoom = useChatStore((state) => state.destroyChatRoom)
   const setSheetContainerRef = useSheetStore((state) => state.setSheetContainerRef)
   const { height: keyboardHeight } = useKeyboardHeight()
+  const { deviceDetect } = useStore((state) => state.settings)
+
+  const isDeviceIOS = useMemo(() => {
+    return deviceDetect?.os() === 'iOS'
+  }, [deviceDetect])
 
   // Sync chat store with bottom sheet
   useEffect(() => {
@@ -62,12 +67,12 @@ const BottomSheet = () => {
       case 'filters':
         return {
           // Fix the bottom sheet height when keyboard is open
-          style: { paddingBottom: keyboardHeight }
+          style: { paddingBottom: isDeviceIOS ? keyboardHeight : 0 }
         }
       case 'chatroom':
         return {
           style: {
-            paddingBottom: keyboardHeight
+            paddingBottom: isDeviceIOS ? keyboardHeight : 0
           },
           disableDrag: true,
           disableScrollLocking: true