From e06fce8184daa4072648af592e2ba644c427c31a Mon Sep 17 00:00:00 2001 From: truph01 Date: Sat, 25 Jul 2026 19:52:53 +0700 Subject: [PATCH 01/11] fix: enable enableEdgeToEdgeBottomSafeAreaPadding --- src/components/AddPaymentMethodMenu.tsx | 1 + src/components/AvatarWithImagePicker.tsx | 1 + src/components/ButtonWithDropdownMenu/index.tsx | 6 ++---- src/components/ConnectToCertiniaFlow/index.tsx | 1 + src/components/ConnectToNetSuiteFlow/index.tsx | 1 + src/components/DecisionModal.tsx | 6 +++++- src/components/ExportDownloadStatusModal.tsx | 5 ++++- src/components/ProactiveAppReviewModal.tsx | 5 ++++- src/components/ReportPDFDownloadModal.tsx | 6 +++++- src/components/RequireTwoFactorAuthenticationModal.tsx | 5 ++++- .../ReportActionCompose/AttachmentPickerWithMenuItems.tsx | 1 + src/pages/settings/Copilot/CopilotPage.tsx | 2 ++ 12 files changed, 31 insertions(+), 9 deletions(-) diff --git a/src/components/AddPaymentMethodMenu.tsx b/src/components/AddPaymentMethodMenu.tsx index b4896dc733f3..1ed8d374b653 100644 --- a/src/components/AddPaymentMethodMenu.tsx +++ b/src/components/AddPaymentMethodMenu.tsx @@ -109,6 +109,7 @@ function AddPaymentMethodMenu({ anchorPosition={anchorPosition} anchorAlignment={anchorAlignment} anchorRef={anchorRef} + enableEdgeToEdgeBottomSafeAreaPadding onItemSelected={() => { setRestoreFocusType(CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE); onClose(); diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx index de0053d9a3d7..43bdada82624 100644 --- a/src/components/AvatarWithImagePicker.tsx +++ b/src/components/AvatarWithImagePicker.tsx @@ -282,6 +282,7 @@ function AvatarWithImagePicker({ menuItems={menuItems} anchorAlignment={anchorAlignment} anchorRef={anchorRef} + enableEdgeToEdgeBottomSafeAreaPadding /> ); diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx index 4e98d2022edd..54bba0bf798a 100644 --- a/src/components/ButtonWithDropdownMenu/index.tsx +++ b/src/components/ButtonWithDropdownMenu/index.tsx @@ -8,7 +8,6 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import usePopoverPosition from '@hooks/usePopoverPosition'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -131,8 +130,6 @@ function ButtonWithDropdownMenu({ref, ...props}: ButtonWithDropdownM setSelectedItemIndex(defaultSelectedIndex); }, [defaultSelectedIndex]); - const {paddingBottom} = useSafeAreaPaddings(true); - const {calculatePopoverPosition} = usePopoverPosition(); useEffect(() => { @@ -342,9 +339,10 @@ function ButtonWithDropdownMenu({ref, ...props}: ButtonWithDropdownM anchorPosition={popoverAnchorPosition} shouldShowRadioButton={shouldShowRadioButton} anchorRef={dropdownAnchor} - scrollContainerStyle={!shouldUseModalPaddingStyle && isSmallScreenWidth && {...styles.pt4, paddingBottom}} + scrollContainerStyle={!shouldUseModalPaddingStyle && isSmallScreenWidth && styles.pt4} anchorAlignment={anchorAlignment} shouldUseModalPaddingStyle={shouldUseModalPaddingStyle} + enableEdgeToEdgeBottomSafeAreaPadding headerText={menuHeaderText} shouldUseScrollView={shouldPopoverUseScrollView} containerStyles={containerStyles} diff --git a/src/components/ConnectToCertiniaFlow/index.tsx b/src/components/ConnectToCertiniaFlow/index.tsx index 67be695707a3..f6b91f3fc2f8 100644 --- a/src/components/ConnectToCertiniaFlow/index.tsx +++ b/src/components/ConnectToCertiniaFlow/index.tsx @@ -116,6 +116,7 @@ function ConnectToCertiniaFlow({policyID}: ConnectToCertiniaFlowProps) { anchorPosition={connectionOptionsPopoverPosition} anchorAlignment={anchorAlignment} anchorRef={threeDotsMenuContainerRef} + enableEdgeToEdgeBottomSafeAreaPadding /> ); } diff --git a/src/components/ConnectToNetSuiteFlow/index.tsx b/src/components/ConnectToNetSuiteFlow/index.tsx index 690a89ef5fd1..a41807d14cc4 100644 --- a/src/components/ConnectToNetSuiteFlow/index.tsx +++ b/src/components/ConnectToNetSuiteFlow/index.tsx @@ -96,6 +96,7 @@ function ConnectToNetSuiteFlow({policyID}: ConnectToNetSuiteFlowProps) { anchorPosition={reuseConnectionPopoverPosition} anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}} anchorRef={threeDotsMenuContainerRef} + enableEdgeToEdgeBottomSafeAreaPadding /> ); } diff --git a/src/components/DecisionModal.tsx b/src/components/DecisionModal.tsx index 78ee64813e5b..1c874282d3aa 100644 --- a/src/components/DecisionModal.tsx +++ b/src/components/DecisionModal.tsx @@ -86,8 +86,12 @@ function DecisionModal({ onModalHide={onModalHide} shouldWrapModalChildrenInScrollViewIfBottomDockedInLandscapeMode={false} shouldHandleNavigationBack={shouldHandleNavigationBack} + enableEdgeToEdgeBottomSafeAreaPadding > - +
{ if (isPreparing) { @@ -200,8 +202,9 @@ function ExportDownloadStatusModal({exportID, isVisible, onClose, failedBody}: E onBackdropPress={isNonDismissible ? () => {} : undefined} type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM} innerContainerStyle={styles.pv0} + enableEdgeToEdgeBottomSafeAreaPadding > - {renderContent()} + {renderContent()} ); } diff --git a/src/components/ProactiveAppReviewModal.tsx b/src/components/ProactiveAppReviewModal.tsx index 8cf7071477a9..b9390c49c771 100644 --- a/src/components/ProactiveAppReviewModal.tsx +++ b/src/components/ProactiveAppReviewModal.tsx @@ -1,3 +1,4 @@ +import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -32,6 +33,7 @@ function ProactiveAppReviewModal({isVisible, onPositive, onNegative, onSkip}: Pr const styles = useThemeStyles(); const illustrations = useMemoizedLazyIllustrations(['ToddWithPhones']); const {translate} = useLocalize(); + const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding: true, style: styles.m5}); return ( - + {/* Todd with phones illustration */} - + diff --git a/src/components/RequireTwoFactorAuthenticationModal.tsx b/src/components/RequireTwoFactorAuthenticationModal.tsx index d0d1f641458b..45efe0913f18 100644 --- a/src/components/RequireTwoFactorAuthenticationModal.tsx +++ b/src/components/RequireTwoFactorAuthenticationModal.tsx @@ -1,3 +1,4 @@ +import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle'; import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -47,6 +48,7 @@ function RequireTwoFactorAuthenticationModal({onCancel = () => {}, description, const StyleUtils = useStyleUtils(); const isReduceMotionEnabled = Accessibility.useReducedMotion(); const illustrations = useMemoizedLazyIllustrations(['Safe']); + const bottomSafeAreaPaddingStyle = useBottomSafeSafeAreaPaddingStyle({addBottomSafeAreaPadding: true}); return ( {}, description, type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM} innerContainerStyle={{...styles.pb5, ...styles.pt0, ...styles.boxShadowNone}} shouldEnableNewFocusManagement={shouldEnableNewFocusManagement} + enableEdgeToEdgeBottomSafeAreaPadding > - + {isReduceMotionEnabled ? ( ); diff --git a/src/pages/settings/Copilot/CopilotPage.tsx b/src/pages/settings/Copilot/CopilotPage.tsx index f30e004fe596..ab83a7c3a22c 100644 --- a/src/pages/settings/Copilot/CopilotPage.tsx +++ b/src/pages/settings/Copilot/CopilotPage.tsx @@ -489,6 +489,7 @@ function CopilotPage() { vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, }} menuItems={delegatePopoverMenuItems} + enableEdgeToEdgeBottomSafeAreaPadding onClose={() => { setShouldShowDelegatePopoverMenu(false); setSelectedEmail(undefined); @@ -503,6 +504,7 @@ function CopilotPage() { vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, }} menuItems={delegatorPopoverMenuItems} + enableEdgeToEdgeBottomSafeAreaPadding onClose={() => { setShouldShowDelegatorPopoverMenu(false); setSelectedEmail(undefined); From 2265a215bdf03f87d2c245536d62b3658a5cc2db Mon Sep 17 00:00:00 2001 From: truph01 Date: Sat, 25 Jul 2026 19:59:30 +0700 Subject: [PATCH 02/11] fix: enable enableEdgeToEdgeBottomSafeAreaPadding --- src/components/Search/SearchList/SearchSelectAllMenu.tsx | 1 + .../Search/SearchPageHeader/SearchActionsBarCreateButton.tsx | 1 + src/pages/Search/SearchTypeMenuNarrow.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/src/components/Search/SearchList/SearchSelectAllMenu.tsx b/src/components/Search/SearchList/SearchSelectAllMenu.tsx index 7ae02286df20..dd8ad8a991f4 100644 --- a/src/components/Search/SearchList/SearchSelectAllMenu.tsx +++ b/src/components/Search/SearchList/SearchSelectAllMenu.tsx @@ -94,6 +94,7 @@ function SearchSelectAllMenu({isSelectAllChecked, isIndeterminate, selectedItems horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, }} + enableEdgeToEdgeBottomSafeAreaPadding />