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), web(a.fixed),
a.inset_0, a.inset_0,
a.z_10, a.z_10,
a.px_xl,
webOptions?.alignCenter ? a.justify_center : undefined,
a.align_center, a.align_center,
gtMobile ? a.p_5xl : a.p_xl, {
{overflowY: 'auto'}, overflowY: 'auto',
paddingVertical: gtMobile ? '10vh' : a.pt_xl.paddingTop,
},
]}> ]}>
<Backdrop /> <Backdrop />
<View <View
style={[ style={[
a.w_full, a.w_full,
a.z_20, a.z_20,
webOptions?.alignTop ? undefined : a.justify_center,
a.align_center, a.align_center,
{ web({minHeight: '60vh'}),
minHeight: web('calc(90vh - 36px)') || undefined,
},
]}> ]}>
{children} {children}
</View> </View>
+1 -1
View File
@@ -61,7 +61,7 @@ export type DialogOuterProps = {
onClose?: () => void onClose?: () => void
nativeOptions?: Omit<BottomSheetViewProps, 'children'> nativeOptions?: Omit<BottomSheetViewProps, 'children'>
webOptions?: { webOptions?: {
alignTop?: boolean alignCenter?: boolean
} }
testID?: string testID?: string
} }
+1
View File
@@ -45,6 +45,7 @@ export function Outer({
<Dialog.Outer <Dialog.Outer
control={control} control={control}
testID={testID} testID={testID}
webOptions={{alignCenter: true}}
nativeOptions={{preventExpansion: true, ...nativeOptions}}> nativeOptions={{preventExpansion: true, ...nativeOptions}}>
<Dialog.Handle /> <Dialog.Handle />
<Context.Provider value={context}> <Context.Provider value={context}>
+1 -1
View File
@@ -22,7 +22,7 @@ import {ReportDialogProps} from './types'
export function ReportDialog(props: ReportDialogProps) { export function ReportDialog(props: ReportDialogProps) {
return ( return (
<Dialog.Outer webOptions={{alignTop: true}} control={props.control}> <Dialog.Outer control={props.control}>
<Dialog.Handle /> <Dialog.Handle />
<ReportDialogInner {...props} /> <ReportDialogInner {...props} />
</Dialog.Outer> </Dialog.Outer>