From 63ba0a436b7b2b768160ecd9e3971ed296602859 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 18 Feb 2025 09:45:37 -0600
Subject: [PATCH] [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 | 14 ++++++++------
 src/components/Dialog/types.ts      |  4 +++-
 src/components/Prompt.tsx           |  1 +
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index 9f4f8bb3fa..066cfbd3a5 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/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>
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index 526784baac..b87bfe2b71 100644
--- a/src/components/Dialog/types.ts
+++ b/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
 }
 
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 7b33c6e256..404790462b 100644
--- a/src/components/Prompt.tsx
+++ b/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}>