diff options
| author | Eric Bailey <git@esb.lol> | 2025-02-18 09:45:37 -0600 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-02-18 09:45:37 -0600 |
| commit | 63ba0a436b7b2b768160ecd9e3971ed296602859 (patch) | |
| tree | 1f5c384ff070480428dfcc9711ac612d0c69c0f6 /src | |
| parent | a51fc8e434b63a3f85accbf1bd29a01397c4b057 (diff) | |
| download | voidsky-63ba0a436b7b2b768160ecd9e3971ed296602859.tar.zst | |
[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
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Dialog/index.web.tsx | 14 | ||||
| -rw-r--r-- | src/components/Dialog/types.ts | 4 | ||||
| -rw-r--r-- | 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 9f4f8bb3f..066cfbd3a 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 526784baa..b87bfe2b7 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 7b33c6e25..404790462 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}> |