diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx index 5fa17e726c6f..a3bd98bd8440 100644 --- a/src/components/AvatarWithImagePicker.tsx +++ b/src/components/AvatarWithImagePicker.tsx @@ -123,6 +123,9 @@ type AvatarWithImagePickerProps = { /** Optionally override the default "Edit" icon */ editIcon?: IconAsset; + + /** Determines if a style utility function should be used for calculating the PopoverMenu anchor position. */ + shouldUseStyleUtilityForAnchorPosition?: boolean; }; function AvatarWithImagePicker({ @@ -152,6 +155,7 @@ function AvatarWithImagePicker({ enablePreview = false, shouldDisableViewPhoto = false, editIcon = Expensicons.Pencil, + shouldUseStyleUtilityForAnchorPosition = false, }: AvatarWithImagePickerProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -393,7 +397,7 @@ function AvatarWithImagePicker({ } }} menuItems={menuItems} - anchorPosition={popoverPosition} + anchorPosition={shouldUseStyleUtilityForAnchorPosition ? styles.popoverMenuOffset(windowWidth) : popoverPosition} anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}} withoutOverlay anchorRef={anchorRef} diff --git a/src/pages/NewChatConfirmPage.tsx b/src/pages/NewChatConfirmPage.tsx index 82f67eb40c86..870e85bac235 100644 --- a/src/pages/NewChatConfirmPage.tsx +++ b/src/pages/NewChatConfirmPage.tsx @@ -128,6 +128,7 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP shouldDisableViewPhoto editIcon={Expensicons.Camera} editIconStyle={styles.smallEditIconAccount} + shouldUseStyleUtilityForAnchorPosition /> Report.clearAvatarErrors(report.reportID ?? '')} + shouldUseStyleUtilityForAnchorPosition /> ) : ( horizontal: windowWidth - 140, } satisfies AnchorPosition), + popoverMenuOffset: (windowWidth: number) => + ({ + ...getPopOverVerticalOffset(180), + horizontal: windowWidth - 355, + } satisfies AnchorPosition), + iPhoneXSafeArea: { backgroundColor: theme.inverse, flex: 1,