Merge pull request Expensify#53542 from margelo/fix/search-incorrect-…

…paddings-53461 fix: incorrect paddings in Search popover
dukenv0307 · Dec 4, 2024 · 0296f80 · 0296f80
2 parents 1462048 + be17e04
commit 0296f80
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx
@@ -127,6 +127,9 @@ type PopoverMenuProps = Partial<PopoverModalProps> & {
 
     /** Whether to update the focused index on a row select */
     shouldUpdateFocusedIndex?: boolean;
+
+    /** Should we apply padding style in modal itself. If this value is false, we will handle it in ScreenWrapper */
+    shouldUseModalPaddingStyle?: boolean;
 };
 
 const renderWithConditionalWrapper = (shouldUseScrollView: boolean, contentContainerStyle: StyleProp<ViewStyle>, children: ReactNode): React.JSX.Element => {
@@ -166,6 +169,7 @@ function PopoverMenu({
     scrollContainerStyle,
     shouldUseScrollView = false,
     shouldUpdateFocusedIndex = true,
+    shouldUseModalPaddingStyle,
 }: PopoverMenuProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -338,6 +342,7 @@ function PopoverMenu({
             useNativeDriver
             restoreFocusType={restoreFocusType}
             innerContainerStyle={innerContainerStyle}
+            shouldUseModalPaddingStyle={shouldUseModalPaddingStyle}
         >
             <FocusTrapForModal active={isVisible}>
                 <View style={[isSmallScreenWidth ? {maxHeight: windowHeight - 250} : styles.createMenuContainer, containerStyles]}>

diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx
@@ -14,8 +14,8 @@ import Text from '@components/Text';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import useDeleteSavedSearch from '@hooks/useDeleteSavedSearch';
 import useLocalize from '@hooks/useLocalize';
-import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useSingleExecution from '@hooks/useSingleExecution';
+import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -63,7 +63,7 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title,
     const [reports = {}] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
     const taxRates = getAllTaxRates();
     const [cardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
-    const {bottom} = useSafeAreaInsets();
+    const {unmodifiedPaddings} = useStyledSafeAreaInsets();
 
     const [isPopoverVisible, setIsPopoverVisible] = useState(false);
     const buttonRef = useRef<HTMLDivElement>(null);
@@ -211,9 +211,9 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title,
                 onClose={closeMenu}
                 onItemSelected={closeMenu}
                 anchorRef={buttonRef}
-                innerContainerStyle={{paddingBottom: bottom}}
-                scrollContainerStyle={styles.pv4}
                 shouldUseScrollView
+                shouldUseModalPaddingStyle={false}
+                innerContainerStyle={{paddingBottom: unmodifiedPaddings.bottom}}
             />
             <DeleteConfirmModal />
         </View>