diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx index efa955a8a90b..4bdd73b08459 100644 --- a/src/components/ButtonWithDropdownMenu/index.tsx +++ b/src/components/ButtonWithDropdownMenu/index.tsx @@ -8,6 +8,7 @@ import * as Expensicons from '@components/Icon/Expensicons'; import PopoverMenu from '@components/PopoverMenu'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; 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'; @@ -81,6 +82,8 @@ function ButtonWithDropdownMenuInner(props: ButtonWithDropdownMenuPr const nullCheckRef = (refParam: RefObject) => refParam ?? null; const shouldShowButtonRightIcon = !!options.at(0)?.shouldShowButtonRightIcon; + const {paddingBottom} = useSafeAreaPaddings(true); + useEffect(() => { if (!dropdownAnchor.current) { return; @@ -265,7 +268,7 @@ function ButtonWithDropdownMenuInner(props: ButtonWithDropdownMenuPr anchorRef={nullCheckRef(dropdownAnchor)} withoutOverlay shouldUseScrollView - scrollContainerStyle={!shouldUseModalPaddingStyle && isSmallScreenWidth && styles.pv4} + scrollContainerStyle={!shouldUseModalPaddingStyle && isSmallScreenWidth && {...styles.pt4, paddingBottom}} shouldUseModalPaddingStyle={shouldUseModalPaddingStyle} anchorAlignment={anchorAlignment} headerText={menuHeaderText}