refactor: safe area inset fallback (#2329)

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -6,7 +6,7 @@ import PreferencesMenuItem from './PreferencesComponents/MenuItem'
 import { PreferencesMenu } from './PreferencesMenu'
 import { PreferenceId } from '@standardnotes/ui-services'
 import { classNames } from '@standardnotes/snjs'
-import { isIOS } from '@/Utils'
+import { useAvailableSafeAreaPadding } from '@/Hooks/useSafeAreaPadding'
 
 type Props = {
   menu: PreferencesMenu
@@ -25,11 +25,13 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
     [menuItems],
   )
 
+  const { hasBottomInset } = useAvailableSafeAreaPadding()
+
   return (
     <div
       className={classNames(
         'border-t border-border bg-default px-5 pt-2 md:border-0 md:bg-contrast md:px-0 md:py-0',
-        isIOS() ? 'pb-safe-bottom' : 'pb-2 md:pb-0',
+        hasBottomInset ? 'pb-safe-bottom' : 'pb-2 md:pb-0',
       )}
     >
       <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">

packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx

@@ -8,9 +8,9 @@ import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobi
 import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
 import Modal from '../Modal/Modal'
 import { classNames } from '@standardnotes/snjs'
-import { isIOS } from '@/Utils'
 import { useCommandService } from '../CommandProvider'
 import { ESCAPE_COMMAND } from '@standardnotes/ui-services'
+import { useAvailableSafeAreaPadding } from '@/Hooks/useSafeAreaPadding'
 
 const PreferencesView: FunctionComponent<PreferencesProps> = ({
   application,
@@ -56,6 +56,8 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
     })
   }, [commandService, closePreferences])
 
+  const { hasTopInset } = useAvailableSafeAreaPadding()
+
   return (
     <Modal
       close={closePreferences}
@@ -68,7 +70,7 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
         <div
           className={classNames(
             'flex w-full flex-row items-center justify-between border-b border-solid border-border bg-default px-3 pb-2 md:p-3',
-            isIOS() ? 'pt-safe-top' : 'pt-2',
+            hasTopInset ? 'pt-safe-top' : 'pt-2',
           )}
         >
           <div className="hidden h-8 w-8 md:block" />