fix: better safe area padding on iOS (#1618)

This commit is contained in:
Aman Harwara
2022-09-23 01:03:36 +05:30
committed by GitHub
parent 5961bc491d
commit 86251b49d3
11 changed files with 28 additions and 19 deletions

View File

@@ -4,8 +4,9 @@ import { observer } from 'mobx-react-lite'
import { PreferencesMenu } from './PreferencesMenu'
import PreferencesCanvas from './PreferencesCanvas'
import { PreferencesProps } from './PreferencesProps'
import { fitNodeToMobileScreen } from '@/Utils'
import { fitNodeToMobileScreen, isIOS } from '@/Utils'
import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
import { classNames } from '@/Utils/ConcatenateClassNames'
const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
const menu = useMemo(
@@ -31,7 +32,10 @@ const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
return (
<div
className="absolute top-0 left-0 z-preferences flex h-full max-h-screen w-full flex-col bg-contrast"
className={classNames(
'absolute top-0 left-0 z-preferences flex h-full max-h-screen w-full flex-col bg-default pt-safe-top',
isIOS() ? 'pb-safe-bottom' : 'pb-2',
)}
ref={fitNodeToMobileScreen}
>
<div className="flex w-full flex-row items-center justify-between border-b border-solid border-border bg-default px-3 py-2 md:p-3">