fix: saved search ThreeDotsMenu's fixed position

src/pages/Search/SavedSearchItemThreeDotMenu.tsx

@@ -0,0 +1,37 @@
+import React, {useRef, useState} from 'react';
+import {View} from 'react-native';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
+import ThreeDotsMenu from '@components/ThreeDotsMenu';
+import CONST from '@src/CONST';
+
+type SavedSearchItemThreeDotMenuProps = {
+    menuItems: PopoverMenuItem[];
+};
+
+function SavedSearchItemThreeDotMenu({menuItems}: SavedSearchItemThreeDotMenuProps) {
+    const threeDotsMenuContainerRef = useRef<View>(null);
+    const [threeDotsMenuPosition, setThreeDotsMenuPosition] = useState({horizontal: 0, vertical: 0});
+
+    return (
+        <View ref={threeDotsMenuContainerRef}>
+            <ThreeDotsMenu
+                menuItems={menuItems}
+                onIconPress={() => {
+                    threeDotsMenuContainerRef.current?.measureInWindow((x, y, width) => {
+                        setThreeDotsMenuPosition({
+                            horizontal: x + width,
+                            vertical: y,
+                        });
+                    });
+                }}
+                anchorPosition={threeDotsMenuPosition}
+                anchorAlignment={{
+                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+                }}
+            />
+        </View>
+    );
+}
+
+export default SavedSearchItemThreeDotMenu;

src/pages/Search/SearchTypeMenu.tsx

@@ -10,7 +10,6 @@ import {usePersonalDetails} from '@components/OnyxProvider';
 import ScrollView from '@components/ScrollView';
 import type {SearchQueryJSON} from '@components/Search/types';
 import Text from '@components/Text';
-import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import useDeleteSavedSearch from '@hooks/useDeleteSavedSearch';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -29,6 +28,7 @@ import ROUTES from '@src/ROUTES';
 import type {SaveSearchItem} from '@src/types/onyx/SaveSearch';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import type IconAsset from '@src/types/utils/IconAsset';
+import SavedSearchItemThreeDotMenu from './SavedSearchItemThreeDotMenu';
 import SearchTypeMenuNarrow from './SearchTypeMenuNarrow';
 
 type SavedSearchMenuItem = MenuItemBaseProps & {
@@ -102,6 +102,7 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
             const jsonQuery = SearchUtils.buildSearchQueryJSON(item.query) ?? ({} as SearchQueryJSON);
             title = SearchUtils.getSearchHeaderTitle(jsonQuery, personalDetails, cardList, reports, taxRates);
         }
+
         const baseMenuItem: SavedSearchMenuItem = {
             key,
             title,
@@ -113,16 +114,7 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
                 SearchActions.clearAllFilters();
                 Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: item?.query ?? ''}));
             },
-            rightComponent: (
-                <ThreeDotsMenu
-                    menuItems={getOverflowMenu(item.name, Number(key), item.query)}
-                    anchorPosition={{horizontal: 0, vertical: 380}}
-                    anchorAlignment={{
-                        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
-                    }}
-                />
-            ),
+            rightComponent: <SavedSearchItemThreeDotMenu menuItems={getOverflowMenu(item.name, Number(key), item.query)} />,
             styles: [styles.alignItemsCenter],
         };