Align all dialogs to top, with relative spacing on larger screens for better balance

This commit is contained in:
Eric Bailey
2025-02-18 09:16:18 -06:00
parent bdeb302b2f
commit 432908c577
4 changed files with 10 additions and 8 deletions
+7 -6
View File
@@ -116,20 +116,21 @@ export function Outer({
web(a.fixed),
a.inset_0,
a.z_10,
a.px_xl,
webOptions?.alignCenter ? a.justify_center : undefined,
a.align_center,
gtMobile ? a.p_5xl : a.p_xl,
{overflowY: 'auto'},
{
overflowY: 'auto',
paddingVertical: gtMobile ? '10vh' : a.pt_xl.paddingTop,
},
]}>
<Backdrop />
<View
style={[
a.w_full,
a.z_20,
webOptions?.alignTop ? undefined : a.justify_center,
a.align_center,
{
minHeight: web('calc(90vh - 36px)') || undefined,
},
web({minHeight: '60vh'}),
]}>
{children}
</View>
+1 -1
View File
@@ -61,7 +61,7 @@ export type DialogOuterProps = {
onClose?: () => void
nativeOptions?: Omit<BottomSheetViewProps, 'children'>
webOptions?: {
alignTop?: boolean
alignCenter?: boolean
}
testID?: string
}
+1
View File
@@ -45,6 +45,7 @@ export function Outer({
<Dialog.Outer
control={control}
testID={testID}
webOptions={{alignCenter: true}}
nativeOptions={{preventExpansion: true, ...nativeOptions}}>
<Dialog.Handle />
<Context.Provider value={context}>
+1 -1
View File
@@ -22,7 +22,7 @@ import {ReportDialogProps} from './types'
export function ReportDialog(props: ReportDialogProps) {
return (
<Dialog.Outer webOptions={{alignTop: true}} control={props.control}>
<Dialog.Outer control={props.control}>
<Dialog.Handle />
<ReportDialogInner {...props} />
</Dialog.Outer>