diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 2fd30bf3ab..274ac4a9ef 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -6,9 +6,7 @@ import { View, type ViewStyle, } from 'react-native' -import {msg} from '@lingui/core/macro' -import {useLingui} from '@lingui/react' -import {Trans} from '@lingui/react/macro' +import {Trans, useLingui} from '@lingui/react/macro' import flattenReactChildren from 'react-keyed-flatten-children' import {atoms as a, useTheme} from '#/alf' @@ -32,6 +30,11 @@ import { import {Text} from '#/components/Typography' import {IS_ANDROID, IS_IOS, IS_NATIVE} from '#/env' +// iOS 26's floaty sheet presentation subtracts the bottom safe-area inset from +// the requested detent, which eats the visible bottom padding of short (e.g. +// single-item) menus. Flooring the native sheet height restores that padding. +const IOS_MENU_MIN_HEIGHT = 128 + export { type DialogControlProps as MenuControlProps, useDialogControl as useMenuControl, @@ -101,16 +104,19 @@ export function Outer({ onCloseAutoFocus?: (event: Event) => void }>) { const context = useMenuContext() - const {_} = useLingui() + const {t: l} = useLingui() return ( + nativeOptions={{ + preventExpansion: true, + minHeight: IS_IOS ? IOS_MENU_MIN_HEIGHT : undefined, + }}> {/* Re-wrap with context since Dialogs are portal-ed to root */} - + {children} {IS_NATIVE && showCancel && } @@ -353,12 +359,12 @@ export function Group({children, style}: GroupProps) { } function Cancel() { - const {_} = useLingui() + const {t: l} = useLingui() const context = useMenuContext() return (