From b1c1c49897fa291910a8dece9725190f21457132 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Sat, 23 Nov 2024 19:13:17 +0000
Subject: [PATCH] Fix avi button hitslops (#6662)

* Remove web hack from non-web file

* Remove hitSlop on the wrong Pressable

It is not doing anything useful.

* Extend avi column to prevent hit rect clipping

You can't click outside the parent on Android.

* Bump pressed opacity to .8

* Slightly reduce avi button hitslops

* Asymmetric hit slop
---
 src/view/com/posts/AviFollowButton.tsx     |  9 +++++++-
 src/view/com/posts/FeedItem.tsx            |  2 +-
 src/view/com/util/forms/NativeDropdown.tsx | 24 +++++-----------------
 3 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/view/com/posts/AviFollowButton.tsx b/src/view/com/posts/AviFollowButton.tsx
index 53e2146f458..1c894bffec4 100644
--- a/src/view/com/posts/AviFollowButton.tsx
+++ b/src/view/com/posts/AviFollowButton.tsx
@@ -95,7 +95,14 @@ export function AviFollowButton({
           <NativeDropdown items={items}>
             <View
               style={[
-                {width: 30, height: 30},
+                {
+                  // An asymmetric hit slop
+                  // to prioritize bottom right taps.
+                  paddingTop: 2,
+                  paddingLeft: 2,
+                  paddingBottom: 6,
+                  paddingRight: 6,
+                },
                 a.align_center,
                 a.justify_center,
                 a.rounded_full,
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 049748754db..c04921c686a 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -618,10 +618,10 @@ const styles = StyleSheet.create({
   layout: {
     flexDirection: 'row',
     marginTop: 1,
-    gap: 10,
   },
   layoutAvi: {
     paddingLeft: 8,
+    paddingRight: 10,
     position: 'relative',
     zIndex: 999,
   },
diff --git a/src/view/com/util/forms/NativeDropdown.tsx b/src/view/com/util/forms/NativeDropdown.tsx
index 22237f5e141..8fc9be6da11 100644
--- a/src/view/com/util/forms/NativeDropdown.tsx
+++ b/src/view/com/util/forms/NativeDropdown.tsx
@@ -5,10 +5,9 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import * as DropdownMenu from 'zeego/dropdown-menu'
 import {MenuItemCommonProps} from 'zeego/lib/typescript/menu'
 
-import {HITSLOP_10} from '#/lib/constants'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useTheme} from '#/lib/ThemeContext'
-import {isIOS, isWeb} from '#/platform/detection'
+import {isIOS} from '#/platform/detection'
 import {Portal} from '#/components/Portal'
 
 // Custom Dropdown Menu Components
@@ -30,31 +29,18 @@ export const DropdownMenuTrigger = DropdownMenu.create(
   (props: TriggerProps) => {
     const theme = useTheme()
     const defaultCtrlColor = theme.palette.default.postCtrl
-    const ref = React.useRef<View>(null)
-
-    // HACK
-    // fire a click event on the keyboard press to trigger the dropdown
-    // -prf
-    const onPress = isWeb
-      ? (evt: any) => {
-          if (evt instanceof KeyboardEvent) {
-            // @ts-ignore web only -prf
-            ref.current?.click()
-          }
-        }
-      : undefined
 
     return (
+      // This Pressable doesn't actually do anything other than
+      // provide the "pressed state" visual feedback.
       <Pressable
         testID={props.testID}
         accessibilityRole="button"
         accessibilityLabel={props.accessibilityLabel}
         accessibilityHint={props.accessibilityHint}
-        style={({pressed}) => [{opacity: pressed ? 0.5 : 1}]}
-        hitSlop={HITSLOP_10}
-        onPress={onPress}>
+        style={({pressed}) => [{opacity: pressed ? 0.8 : 1}]}>
         <DropdownMenu.Trigger action="press">
-          <View ref={ref}>
+          <View>
             {props.children ? (
               props.children
             ) : (