Fix post controls tap areas (#2627)

src/view/com/util/post-ctrls/PostCtrls.tsx

@@ -118,14 +118,14 @@ let PostCtrls = ({
 
   return (
     <View style={[styles.ctrls, style]}>
-      <TouchableOpacity
+      <View
-        testID="replyBtn"
         style={[
           styles.ctrl,
-          !big && styles.ctrlPad,
-          {paddingLeft: 0},
           post.viewer?.replyDisabled ? {opacity: 0.5} : undefined,
-        ]}
+        ]}>
+        <TouchableOpacity
+          testID="replyBtn"
+          style={[styles.btn, !big && styles.btnPad, {paddingLeft: 0}]}
           onPress={() => {
             if (!post.viewer?.replyDisabled) {
               requireAuth(() => onPressReply())
@@ -148,7 +148,8 @@ let PostCtrls = ({
             </Text>
           ) : undefined}
         </TouchableOpacity>
-      <View style={[styles.ctrl, !big && styles.ctrlPad]}>
+      </View>
+      <View style={[styles.ctrl]}>
         <RepostButton
           big={big}
           isReposted={!!post.viewer?.repost}
@@ -157,9 +158,10 @@ let PostCtrls = ({
           onQuote={onQuote}
         />
       </View>
+      <View style={styles.ctrl}>
         <TouchableOpacity
           testID="likeBtn"
-        style={[styles.ctrl, !big && styles.ctrlPad]}
+          style={[styles.btn, !big && styles.btnPad]}
           onPress={() => {
             requireAuth(() => onPressToggleLike())
           }}
@@ -190,6 +192,7 @@ let PostCtrls = ({
             </Text>
           ) : undefined}
         </TouchableOpacity>
+      </View>
       {big ? undefined : (
         <PostDropdownBtn
           testID="postDropdownBtn"
@@ -199,7 +202,7 @@ let PostCtrls = ({
           record={record}
           richText={richText}
           showAppealLabelItem={showAppealLabelItem}
-          style={styles.ctrlPad}
+          style={styles.btnPad}
         />
       )}
       {/* used for adding pad to the right side */}
@@ -214,13 +217,17 @@ const styles = StyleSheet.create({
   ctrls: {
     flexDirection: 'row',
     justifyContent: 'space-between',
+    alignItems: 'center',
   },
   ctrl: {
     flex: 1,
+    alignItems: 'flex-start',
+  },
+  btn: {
     flexDirection: 'row',
     alignItems: 'center',
   },
-  ctrlPad: {
+  btnPad: {
     paddingTop: 5,
     paddingBottom: 5,
     paddingLeft: 5,

src/view/com/util/post-ctrls/RepostButton.tsx

@@ -53,7 +53,7 @@ let RepostButton = ({
       onPress={() => {
         requireAuth(() => onPressToggleRepostWrapper())
       }}
-      style={[styles.container]}
+      style={[styles.btn, !big && styles.btnPad]}
       accessibilityRole="button"
       accessibilityLabel={`${
         isReposted
@@ -89,10 +89,16 @@ RepostButton = memo(RepostButton)
 export {RepostButton}
 
 const styles = StyleSheet.create({
-  container: {
+  btn: {
     flexDirection: 'row',
     alignItems: 'center',
   },
+  btnPad: {
+    paddingTop: 5,
+    paddingBottom: 5,
+    paddingLeft: 5,
+    paddingRight: 5,
+  },
   reposted: {
     color: colors.green3,
   },

src/view/com/util/post-ctrls/RepostButton.web.tsx

@@ -69,7 +69,8 @@ export const RepostButton = ({
   const inner = (
     <View
       style={[
-        styles.container,
+        styles.btn,
+        !big && styles.btnPad,
         (isReposted
           ? styles.reposted
           : defaultControlColor) as StyleProp<ViewStyle>,
@@ -109,11 +110,17 @@ export const RepostButton = ({
 }
 
 const styles = StyleSheet.create({
-  container: {
+  btn: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 4,
   },
+  btnPad: {
+    paddingTop: 5,
+    paddingBottom: 5,
+    paddingLeft: 5,
+    paddingRight: 5,
+  },
   reposted: {
     color: colors.green3,
   },