[APP-1054] Add option to align web dialogs to top (#7760)

* Add option to align web dialogs to top

* Format

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

src/components/Dialog/index.web.tsx

@@ -41,6 +41,7 @@ export function Outer({
   children,
   control,
   onClose,
+  webOptions,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
@@ -115,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_lg : a.p_md,
-                  {overflowY: 'auto'},
+                  {
+                    overflowY: 'auto',
+                    paddingVertical: gtMobile ? '10vh' : a.pt_xl.paddingTop,
+                  },
                 ]}>
                 <Backdrop />
                 <View
                   style={[
                     a.w_full,
                     a.z_20,
-                    a.justify_center,
                     a.align_center,
-                    {
-                      minHeight: web('calc(90vh - 36px)') || undefined,
-                    },
+                    web({minHeight: '60vh'}),
                   ]}>
                   {children}
                 </View>

src/components/Dialog/types.ts

@@ -60,7 +60,9 @@ export type DialogOuterProps = {
   control: DialogControlProps
   onClose?: () => void
   nativeOptions?: Omit<BottomSheetViewProps, 'children'>
-  webOptions?: {}
+  webOptions?: {
+    alignCenter?: boolean
+  }
   testID?: string
 }
 

src/components/Prompt.tsx

@@ -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}>