Fix post controls tap areas (#2627)

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

@@ -118,37 +118,38 @@ 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,
-        ]}
+        ]}>
-        onPress={() => {
+        <TouchableOpacity
-          if (!post.viewer?.replyDisabled) {
+          testID="replyBtn"
-            requireAuth(() => onPressReply())
+          style={[styles.btn, !big && styles.btnPad, {paddingLeft: 0}]}
-          }
+          onPress={() => {
-        }}
+            if (!post.viewer?.replyDisabled) {
-        accessibilityRole="button"
+              requireAuth(() => onPressReply())
-        accessibilityLabel={`Reply (${post.replyCount} ${
+            }
-          post.replyCount === 1 ? 'reply' : 'replies'
+          }}
-        })`}
+          accessibilityRole="button"
-        accessibilityHint=""
+          accessibilityLabel={`Reply (${post.replyCount} ${
-        hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
+            post.replyCount === 1 ? 'reply' : 'replies'
-        <CommentBottomArrow
+          })`}
-          style={[defaultCtrlColor, big ? s.mt2 : styles.mt1]}
+          accessibilityHint=""
-          strokeWidth={3}
+          hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
-          size={big ? 20 : 15}
+          <CommentBottomArrow
-        />
+            style={[defaultCtrlColor, big ? s.mt2 : styles.mt1]}
-        {typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
+            strokeWidth={3}
-          <Text style={[defaultCtrlColor, s.ml5, s.f15]}>
+            size={big ? 20 : 15}
-            {post.replyCount}
+          />
-          </Text>
+          {typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
-        ) : undefined}
+            <Text style={[defaultCtrlColor, s.ml5, s.f15]}>
-      </TouchableOpacity>
+              {post.replyCount}
-      <View style={[styles.ctrl, !big && styles.ctrlPad]}>
+            </Text>
+          ) : undefined}
+        </TouchableOpacity>
+      </View>
+      <View style={[styles.ctrl]}>
         <RepostButton
           big={big}
           isReposted={!!post.viewer?.repost}
@@ -157,39 +158,41 @@ let PostCtrls = ({
           onQuote={onQuote}
         />
       </View>
-      <TouchableOpacity
+      <View style={styles.ctrl}>
-        testID="likeBtn"
+        <TouchableOpacity
-        style={[styles.ctrl, !big && styles.ctrlPad]}
+          testID="likeBtn"
-        onPress={() => {
+          style={[styles.btn, !big && styles.btnPad]}
-          requireAuth(() => onPressToggleLike())
+          onPress={() => {
-        }}
+            requireAuth(() => onPressToggleLike())
-        accessibilityRole="button"
+          }}
-        accessibilityLabel={`${
+          accessibilityRole="button"
-          post.viewer?.like ? _(msg`Unlike`) : _(msg`Like`)
+          accessibilityLabel={`${
-        } (${post.likeCount} ${pluralize(post.likeCount || 0, 'like')})`}
+            post.viewer?.like ? _(msg`Unlike`) : _(msg`Like`)
-        accessibilityHint=""
+          } (${post.likeCount} ${pluralize(post.likeCount || 0, 'like')})`}
-        hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
+          accessibilityHint=""
-        {post.viewer?.like ? (
+          hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
-          <HeartIconSolid style={s.likeColor} size={big ? 22 : 16} />
+          {post.viewer?.like ? (
-        ) : (
+            <HeartIconSolid style={s.likeColor} size={big ? 22 : 16} />
-          <HeartIcon
+          ) : (
-            style={[defaultCtrlColor, big ? styles.mt1 : undefined]}
+            <HeartIcon
-            strokeWidth={3}
+              style={[defaultCtrlColor, big ? styles.mt1 : undefined]}
-            size={big ? 20 : 16}
+              strokeWidth={3}
-          />
+              size={big ? 20 : 16}
-        )}
+            />
-        {typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
+          )}
-          <Text
+          {typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
-            testID="likeCount"
+            <Text
-            style={
+              testID="likeCount"
-              post.viewer?.like
+              style={
-                ? [s.bold, s.likeColor, s.f15, s.ml5]
+                post.viewer?.like
-                : [defaultCtrlColor, s.f15, s.ml5]
+                  ? [s.bold, s.likeColor, s.f15, s.ml5]
-            }>
+                  : [defaultCtrlColor, s.f15, s.ml5]
-            {post.likeCount}
+              }>
-          </Text>
+              {post.likeCount}
-        ) : undefined}
+            </Text>
-      </TouchableOpacity>
+          ) : 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,
   },