[Landscape] Fix popup content is not fully shown

src/CONST/index.ts

@@ -9614,6 +9614,7 @@ const CONST = {
         AUTH_IMAGES: 'auth-images',
     },
 
+    MODAL_MAX_HEIGHT_TO_WINDOW_HEIGHT_RATIO: 0.9,
     MODAL_MAX_HEIGHT_TO_WINDOW_HEIGHT_RATIO_LANDSCAPE_MODE: 0.75,
 
     MAP_VIEW_LAYERS: {

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -490,8 +490,8 @@
 
     const groupByPopoverComponent = useCallback(
         (props: {closeOverlay: () => void}) => (
-            <View style={[!isSmallScreenWidth && styles.pv4]}>
-                <View style={styles.getSelectionListPopoverHeight(groupByOptions.length || 1, windowHeight, false, isInLandscapeMode, false)}>
+            <View style={[styles.pv4]}>
+                <View style={styles.getSelectionListPopoverHeight({itemCount: groupByOptions.length || 1, windowHeight, isInLandscapeMode})}>
                     <SelectionList
                         data={groupByOptions}
                         shouldSingleExecuteRowSelect
@@ -508,7 +508,7 @@
                 </View>
             </View>
         ),
         [groupByOptions, reportLayoutGroupBy, styles, windowHeight, isSmallScreenWidth, isInLandscapeMode],
     );
 
     const transactionListContent = (

src/components/Search/FilterDropdowns/BasePopup.tsx

@@ -23,7 +23,7 @@ function BasePopup({children, label, applySentryLabel, resetSentryLabel, style,
     const styles = useThemeStyles();
 
     return (
-        <View style={[!isSmallScreenWidth && styles.pv4, style]}>
+        <View style={[styles.pv4, style]}>
             {onBackButtonPress ? (
                 <HeaderWithBackButton
                     shouldDisplayHelpButton={false}

src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx

@@ -11,7 +11,6 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import {getDateModifierTitle, getDateRangeDisplayValueFromFormValue} from '@libs/SearchQueryUtils';
 import type {SearchDateModifier} from '@libs/SearchUIUtils';
@@ -47,7 +46,6 @@ function DateSelectPopup({label, value, presets, style, closeOverlay, onChange,
 
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const {windowHeight} = useWindowDimensions();
     const searchDatePresetFilterBaseRef = useRef<SearchDatePresetFilterBaseHandle>(null);
     const scrollViewRef = useRef<React.ComponentRef<typeof ScrollView>>(null);
     const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
@@ -130,8 +128,6 @@ function DateSelectPopup({label, value, presets, style, closeOverlay, onChange,
         closeOverlay();
     }, [clearSelection, closeOverlay, onChange, selectedDateModifier]);
 
-    const maxPopupHeight = Math.round(windowHeight * 0.875);
-
     // For non-Range modes, use original simple styles. For Range, use custom layout
     const useRangeLayout = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
 
@@ -186,14 +182,13 @@ function DateSelectPopup({label, value, presets, style, closeOverlay, onChange,
         );
     }
 
-    const topPaddingStyle = selectedDateModifier ? styles.pt3 : undefined;
     const buttonRowSpacing = selectedDateModifier ? styles.mt4 : styles.mt2;
-    const mobileContainerStyle = useRangeLayout ? [topPaddingStyle, styles.flexGrow1, {maxHeight: maxPopupHeight}] : styles.gap2;
+    const mobileContainerStyle = useRangeLayout ? [styles.flexGrow1] : styles.gap2;
     const mobileLabelStyle = useRangeLayout ? [styles.textLabel, styles.ph5, styles.pb3] : [styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1];
     const mobileButtonRowStyle = useRangeLayout ? [styles.flexRow, styles.ph5, buttonRowSpacing, styles.alignItemsCenter, styles.gap2] : [styles.flexRow, styles.gap2, styles.ph5];
 
     return (
-        <View style={[mobileContainerStyle, style, isInLandscapeMode ? styles.h100 : undefined]}>
+        <View style={[styles.pv4, mobileContainerStyle, style, isInLandscapeMode ? styles.h100 : undefined]}>
             {!selectedDateModifier && !!label && <Text style={mobileLabelStyle}>{label}</Text>}
             <ScrollView
                 ref={scrollViewRef}

src/components/Search/FilterDropdowns/DisplayPopup.tsx

@@ -1,7 +1,6 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import type {SearchQueryJSON} from '@components/Search/types';
@@ -37,7 +36,7 @@
 function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayPopupProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const {shouldUseNarrowLayout, isLargeScreenWidth} = useResponsiveLayout();
+    const {isLargeScreenWidth} = useResponsiveLayout();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Columns']);
     const [searchAdvancedFilters = getEmptyObject<SearchAdvancedFiltersForm>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
     const [selectedDisplayFilter, setSelectedDisplayFilter] = useState<
@@ -72,7 +71,7 @@
         const viewValue = searchAdvancedFilters[CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW];
 
         return (
-            <View style={[!shouldUseNarrowLayout && styles.pv4]}>
+            <View style={[styles.pv4]}>
                 <MenuItemWithTopDescription
                     shouldShowRightIcon
                     description={translate('search.display.sortBy')}
@@ -162,46 +161,35 @@
         setSelectedDisplayFilter(null);
     };
 
-    const subtitle = {
-        [CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY]: translate('search.display.sortBy'),
-        [CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER]: translate('search.display.sortOrder'),
-        [CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY]: translate('search.display.groupBy'),
-        [CONST.SEARCH.SYNTAX_FILTER_KEYS.GROUP_CURRENCY]: translate('common.groupCurrency'),
-        [CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW]: translate('search.view.label'),
-        [CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT]: translate('search.display.limitResults'),
-    };
-
-    let subPopup: React.JSX.Element | null = null;
-
     switch (selectedDisplayFilter) {
         case CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY:
-            subPopup = (
+            return (
                 <SortByPopup
                     searchResults={searchResults}
                     queryJSON={queryJSON}
                     groupBy={groupBy}
                     onSort={onSort}
                     onSortOrderPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER)}
+                    onBackButtonPress={goBack}
                     closeOverlay={closeOverlay}
                 />
             );
-            break;
         case CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_ORDER:
-            subPopup = (
+            return (
                 <SortOrderPopup
                     queryJSON={queryJSON}
                     onSort={onSort}
+                    onBackButtonPress={goBack}
                     closeOverlay={closeOverlay}
                 />
             );
-            break;
         case CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY:
-            subPopup = (
+            return (
                 <GroupByPopup
-                    style={styles.p0}
                     sections={groupBySections}
                     value={groupBy}
                     closeOverlay={closeOverlay}
+                    onBackButtonPress={goBack}
                     onChange={(item) => {
                         const newValue = item?.value;
                         if (!newValue) {
@@ -212,52 +200,37 @@
                     }}
                 />
             );
-            break;
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.GROUP_CURRENCY:
-            subPopup = (
+            return (
                 <GroupCurrencyPopup
                     onChange={(item) => updateFilterForm({groupCurrency: item?.value})}
+                    onBackButtonPress={goBack}
                     closeOverlay={closeOverlay}
                 />
             );
-            break;
         case CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW:
-            subPopup = (
+            return (
                 <SingleSelectPopup
-                    style={styles.p0}
                     items={viewOptions}
                     value={view}
+                    label={translate('search.view.label')}
+                    onBackButtonPress={goBack}
                     closeOverlay={closeOverlay}
                     onChange={(item) => updateFilterForm({view: item?.value ?? CONST.SEARCH.VIEW.TABLE})}
                 />
             );
-            break;
         case CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT:
-            subPopup = (
+            return (
                 <TextInputPopup
-                    style={styles.pv0}
                     placeholder={translate('search.filters.limit')}
                     defaultValue={limitValue}
+                    label={translate('search.display.limitResults')}
+                    onBackButtonPress={goBack}
                     closeOverlay={closeOverlay}
                     onChange={(value) => updateFilterForm({limit: value})}
                 />
             );
-            break;
-        default:
-            break;
     }
-
-    return (
-        <View style={[!shouldUseNarrowLayout && styles.pv4]}>
-            <HeaderWithBackButton
-                shouldDisplayHelpButton={false}
-                style={[styles.h10, styles.pv1, styles.mb2]}
-                subtitle={subtitle[selectedDisplayFilter]}
-                onBackButtonPress={goBack}
-            />
-            {subPopup}
-        </View>
-    );
 }
 
 export default DisplayPopup;

src/components/Search/FilterDropdowns/DropdownButton.tsx

@@ -191,6 +191,7 @@ function DropdownButton({
                 restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
                 shouldEnableNewFocusManagement
                 shouldMeasureAnchorPositionFromTop={false}
+                shouldUseModalPaddingStyle={false}
                 outerStyle={{...StyleUtils.getOuterModalStyle(windowHeight, viewportOffsetTop), ...containerStyles}}
                 // This must be false because we dont want the modal to close if we open the RHP for selections
                 // such as date years

src/components/Search/FilterDropdowns/GroupByPopup.tsx

@@ -5,6 +5,7 @@ import type {SearchGroupBy} from '@components/Search/types';
 import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
 import type {ListItem} from '@components/SelectionList/types';
+import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -18,16 +19,14 @@ type GroupByPopupItem = {
 };
 
 type GroupByPopupProps = {
-    /** The label to show when in an overlay on mobile */
-    label?: string;
-
     /** The grouped options to show in the list */
     sections: GroupBySection[];
 
     /** The currently selected item */
     value: GroupByPopupItem | null;
 
     style?: StyleProp<ViewStyle>;
+    onBackButtonPress: () => void;
 
     /** Function to call to close the overlay when changes are applied */
     closeOverlay: () => void;
@@ -36,10 +35,10 @@ type GroupByPopupProps = {
     onChange: (item: GroupByPopupItem | null) => void;
 };
 
-function GroupByPopup({label, value, sections, style, closeOverlay, onChange}: GroupByPopupProps) {
+function GroupByPopup({value, sections, style, onBackButtonPress, closeOverlay, onChange}: GroupByPopupProps) {
+    const {translate} = useLocalize();
     const styles = useThemeStyles();
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth, isInLandscapeMode} = useResponsiveLayout();
+    const {isInLandscapeMode} = useResponsiveLayout();
     const {windowHeight} = useWindowDimensions();
     const [selectedItem, setSelectedItem] = useState(value);
 
@@ -59,7 +58,7 @@ function GroupByPopup({label, value, sections, style, closeOverlay, onChange}: G
         [sections, selectedItem?.value, styles.dividerLine],
     );
 
-    const optionsCount = Math.max(
+    const itemCount = Math.max(
         1,
         listSections.reduce((count, section) => count + section.data.length + (section.data.length > 0 && !!section.customHeader ? 1 : 0), 0),
     );
@@ -82,25 +81,22 @@ function GroupByPopup({label, value, sections, style, closeOverlay, onChange}: G
         closeOverlay();
     }, [closeOverlay, onChange]);
 
-    const shouldShowLabel = isSmallScreenWidth && !!label;
-
     return (
         <BasePopup
-            label={label}
             onReset={resetChanges}
             onApply={applyChanges}
+            onBackButtonPress={onBackButtonPress}
+            label={translate('search.display.groupBy')}
             resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_SINGLE_SELECT}
             applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_SINGLE_SELECT}
-            style={style}
+            style={[style, styles.getSelectionListPopoverHeight({itemCount, windowHeight, isInLandscapeMode, hasHeader: true})]}
         >
-            <View style={[styles.getSelectionListPopoverHeight(optionsCount, windowHeight, false, isInLandscapeMode, shouldShowLabel)]}>
-                <SelectionListWithSections
-                    sections={listSections}
-                    shouldSingleExecuteRowSelect
-                    ListItem={SingleSelectListItem}
-                    onSelectRow={updateSelectedItem}
-                />
-            </View>
+            <SelectionListWithSections
+                sections={listSections}
+                shouldSingleExecuteRowSelect
+                ListItem={SingleSelectListItem}
+                onSelectRow={updateSelectedItem}
+            />
         </BasePopup>
     );
 }

src/components/Search/FilterDropdowns/GroupCurrencyPopup.tsx

@@ -3,14 +3,14 @@ import type {OnyxEntry} from 'react-native-onyx';
 import {useCurrencyListActions, useCurrencyListState} from '@components/CurrencyListContextProvider';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
-import useThemeStyles from '@hooks/useThemeStyles';
 import {getCurrencyOptions} from '@libs/SearchUIUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import SingleSelectPopup from './SingleSelectPopup';
 import type {SingleSelectItem} from './SingleSelectPopup';
 
 type GroupCurrencyPopupProps = {
+    onBackButtonPress: () => void;
     closeOverlay: () => void;
     onChange: (item: SingleSelectItem<string> | null) => void;
 };
@@ -19,8 +19,7 @@ function filterGroupCurrencySelector(searchAdvancedFiltersForm: OnyxEntry<Search
     return searchAdvancedFiltersForm?.groupCurrency;
 }
 
-function GroupCurrencyPopup({onChange, closeOverlay}: GroupCurrencyPopupProps) {
-    const styles = useThemeStyles();
+function GroupCurrencyPopup({onBackButtonPress, onChange, closeOverlay}: GroupCurrencyPopupProps) {
     const {translate} = useLocalize();
     const {currencyList} = useCurrencyListState();
     const {getCurrencySymbol} = useCurrencyListActions();
@@ -31,9 +30,10 @@ function GroupCurrencyPopup({onChange, closeOverlay}: GroupCurrencyPopupProps) {
 
     return (
         <SingleSelectPopup
-            style={[styles.pv0, styles.mt2]}
             items={groupCurrencyOptions}
             value={groupCurrencyValue}
+            label={translate('common.groupCurrency')}
+            onBackButtonPress={onBackButtonPress}
             closeOverlay={closeOverlay}
             onChange={onChange}
             isSearchable

src/components/Search/FilterDropdowns/InSelectPopup.tsx

@@ -49,7 +49,8 @@ function inSelector(searchAdvancedFiltersForm: SearchAdvancedFiltersForm | undef
 function InSelectPopup({closeOverlay, updateFilterForm}: InSelectPopupProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const {shouldUseNarrowLayout, isInLandscapeMode} = useResponsiveLayout();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth, isInLandscapeMode} = useResponsiveLayout();
     const {windowHeight} = useWindowDimensions();
     const personalDetails = usePersonalDetails();
     const {options, areOptionsInitialized} = useOptionsList();
@@ -187,7 +188,9 @@ function InSelectPopup({closeOverlay, updateFilterForm}: InSelectPopupProps) {
             onApply={applyChanges}
             resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_REPORT}
             applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_REPORT}
-            style={[styles.getCommonSelectionListPopoverHeight(itemCount, variables.optionRowHeight, windowHeight, shouldUseNarrowLayout, isInLandscapeMode, true)]}
+            style={[
+                styles.getSelectionListPopoverHeight({itemCount, itemHeight: variables.optionRowHeight, windowHeight, isInLandscapeMode, hasTitle: isSmallScreenWidth, isSearchable: true}),
+            ]}
         >
             <SelectionListWithSections
                 sections={sections}