Fix overlapping touch targets for profile header buttons (#10868)
This commit is contained in:
committed by
Samuel Newman
parent
007ed09347
commit
a7f748b931
@@ -360,6 +360,10 @@ export function HeaderStandardButtons({
|
|||||||
size="small"
|
size="small"
|
||||||
color="secondary"
|
color="secondary"
|
||||||
shape="round"
|
shape="round"
|
||||||
|
// expand the 33pt button toward a 44pt touch target, capped
|
||||||
|
// horizontally at half the 4pt row gap so the target cannot
|
||||||
|
// overlap the neighboring buttons' own targets
|
||||||
|
hitSlop={{top: 6, bottom: 6, left: 2, right: 2}}
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
playHaptic('Light')
|
playHaptic('Light')
|
||||||
ax.metric('invite:dialog:open', {logContext: 'ProfileHeader'})
|
ax.metric('invite:dialog:open', {logContext: 'ProfileHeader'})
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import {Trans, useLingui} from '@lingui/react/macro'
|
|||||||
import {useNavigation} from '@react-navigation/native'
|
import {useNavigation} from '@react-navigation/native'
|
||||||
import {useQueryClient} from '@tanstack/react-query'
|
import {useQueryClient} from '@tanstack/react-query'
|
||||||
|
|
||||||
import {HITSLOP_20} from '#/lib/constants'
|
|
||||||
import {makeProfileLink} from '#/lib/routes/links'
|
import {makeProfileLink} from '#/lib/routes/links'
|
||||||
import {type NavigationProp} from '#/lib/routes/types'
|
import {type NavigationProp} from '#/lib/routes/types'
|
||||||
import {shareText, shareUrl} from '#/lib/sharing'
|
import {shareText, shareUrl} from '#/lib/sharing'
|
||||||
@@ -264,7 +263,10 @@ let ProfileMenu = ({
|
|||||||
{...props}
|
{...props}
|
||||||
testID="profileHeaderDropdownBtn"
|
testID="profileHeaderDropdownBtn"
|
||||||
label={l`More options`}
|
label={l`More options`}
|
||||||
hitSlop={HITSLOP_20}
|
// hitSlop reaches outside parent views on iOS, so the
|
||||||
|
// left inset must stay within half of the 4pt row gap or
|
||||||
|
// it steals taps from the adjacent header button
|
||||||
|
hitSlop={{top: 6, bottom: 6, left: 2, right: 12}}
|
||||||
variant="solid"
|
variant="solid"
|
||||||
color="secondary"
|
color="secondary"
|
||||||
size="small"
|
size="small"
|
||||||
|
|||||||
Reference in New Issue
Block a user