From 6e1450a00f9c5a46bb791a0c5a1be8ff8388426c Mon Sep 17 00:00:00 2001 From: daledah Date: Wed, 14 Aug 2024 17:00:10 +0700 Subject: [PATCH 1/2] fix: dropdown menu misalign on search page --- src/components/ButtonWithDropdownMenu/index.tsx | 3 ++- src/components/ButtonWithDropdownMenu/types.ts | 3 +++ src/components/Search/SearchPageHeader.tsx | 1 + src/styles/index.ts | 6 ++++++ 4 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx index 943d6dbb5c16..7a88ce22d433 100644 --- a/src/components/ButtonWithDropdownMenu/index.tsx +++ b/src/components/ButtonWithDropdownMenu/index.tsx @@ -40,6 +40,7 @@ function ButtonWithDropdownMenu({ enterKeyEventListenerPriority = 0, wrapperStyle, useKeyboardShortcuts = false, + shouldUseStyleUtilityForAnchorPosition = false, }: ButtonWithDropdownMenuProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -170,7 +171,7 @@ function ButtonWithDropdownMenu({ }} onModalShow={onOptionsMenuShow} onItemSelected={() => setIsMenuVisible(false)} - anchorPosition={popoverAnchorPosition} + anchorPosition={shouldUseStyleUtilityForAnchorPosition ? styles.popoverButtonDropdownMenuOffset(windowWidth) : popoverAnchorPosition} anchorRef={nullCheckRef(dropdownAnchor)} withoutOverlay anchorAlignment={anchorAlignment} diff --git a/src/components/ButtonWithDropdownMenu/types.ts b/src/components/ButtonWithDropdownMenu/types.ts index e4b81da94942..6455a9aa76e5 100644 --- a/src/components/ButtonWithDropdownMenu/types.ts +++ b/src/components/ButtonWithDropdownMenu/types.ts @@ -93,6 +93,9 @@ type ButtonWithDropdownMenuProps = { /** Whether to use keyboard shortcuts for confirmation or not */ useKeyboardShortcuts?: boolean; + + /** Determines if a style utility function should be used for calculating the PopoverMenu anchor position. */ + shouldUseStyleUtilityForAnchorPosition?: boolean; }; export type { diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index 7e4b69c39596..c1fa1b179334 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -295,6 +295,7 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa options={headerButtonsOptions} isSplitButton={false} style={styles.ml2} + shouldUseStyleUtilityForAnchorPosition /> )} diff --git a/src/styles/index.ts b/src/styles/index.ts index aaff81f1325a..44036e933a56 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3623,6 +3623,12 @@ const styles = (theme: ThemeColors) => horizontal: windowWidth - 355, } satisfies AnchorPosition), + popoverButtonDropdownMenuOffset: (windowWidth: number) => + ({ + ...getPopOverVerticalOffset(70), + horizontal: windowWidth - 20, + } satisfies AnchorPosition), + iPhoneXSafeArea: { backgroundColor: theme.inverse, flex: 1, From db5c3a6befcf9a083b733d7c627fef92713c6a3e Mon Sep 17 00:00:00 2001 From: daledah Date: Wed, 28 Aug 2024 14:56:52 +0700 Subject: [PATCH 2/2] fix: remove unmerged --- src/components/Search/SearchPageHeader.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index 5b449f693f41..47549879fae0 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -309,7 +309,6 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa customText={translate('workspace.common.selected', {selectedNumber: selectedTransactionsKeys.length})} options={headerButtonsOptions} isSplitButton={false} - style={styles.ml2} shouldUseStyleUtilityForAnchorPosition /> )}