refactor: mobile modals (#2173)

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

@@ -7,6 +7,8 @@ import PreferencesMenuItem from './PreferencesComponents/MenuItem'
 import { PreferencesMenu } from './PreferencesMenu'
 import { PreferenceId } from '@standardnotes/ui-services'
 import { useApplication } from '../ApplicationProvider'
+import { classNames } from '@standardnotes/snjs'
+import { isIOS } from '@/Utils'
 
 type Props = {
   menu: PreferencesMenu
@@ -53,7 +55,12 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
   }, [application])
 
   return (
-    <div className="border-t border-border bg-default px-5 pt-2 md:border-0 md:bg-contrast md:px-0 md:py-0">
+    <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',
+      )}
+    >
       <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
         {menuItems.map((pref) => (
           <PreferencesMenuItem
@@ -81,6 +88,11 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
           onChange={(paneId) => {
             selectPane(paneId as PreferenceId)
           }}
+          classNameOverride={{
+            wrapper: 'relative',
+            popover: 'bottom-full w-full max-h-max',
+          }}
+          portal={false}
         />
       </div>
     </div>