Fix post controls tap areas (#2627)

3 files changed, 87 insertions, 67 deletions

diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx
index 65582ba88..a6d7e38c3 100644
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@@ -118,37 +118,38 @@ let PostCtrls = ({
 
   return (
     <View style={[styles.ctrls, style]}>
-      <TouchableOpacity
-        testID="replyBtn"
+      <View
         style={[
           styles.ctrl,
-          !big && styles.ctrlPad,
-          {paddingLeft: 0},
           post.viewer?.replyDisabled ? {opacity: 0.5} : undefined,
-        ]}
-        onPress={() => {
-          if (!post.viewer?.replyDisabled) {
-            requireAuth(() => onPressReply())
-          }
-        }}
-        accessibilityRole="button"
-        accessibilityLabel={`Reply (${post.replyCount} ${
-          post.replyCount === 1 ? 'reply' : 'replies'
-        })`}
-        accessibilityHint=""
-        hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
-        <CommentBottomArrow
-          style={[defaultCtrlColor, big ? s.mt2 : styles.mt1]}
-          strokeWidth={3}
-          size={big ? 20 : 15}
-        />
-        {typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
-          <Text style={[defaultCtrlColor, s.ml5, s.f15]}>
-            {post.replyCount}
-          </Text>
-        ) : undefined}
-      </TouchableOpacity>
-      <View style={[styles.ctrl, !big && styles.ctrlPad]}>
+        ]}>
+        <TouchableOpacity
+          testID="replyBtn"
+          style={[styles.btn, !big && styles.btnPad, {paddingLeft: 0}]}
+          onPress={() => {
+            if (!post.viewer?.replyDisabled) {
+              requireAuth(() => onPressReply())
+            }
+          }}
+          accessibilityRole="button"
+          accessibilityLabel={`Reply (${post.replyCount} ${
+            post.replyCount === 1 ? 'reply' : 'replies'
+          })`}
+          accessibilityHint=""
+          hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
+          <CommentBottomArrow
+            style={[defaultCtrlColor, big ? s.mt2 : styles.mt1]}
+            strokeWidth={3}
+            size={big ? 20 : 15}
+          />
+          {typeof post.replyCount !== 'undefined' && post.replyCount > 0 ? (
+            <Text style={[defaultCtrlColor, s.ml5, s.f15]}>
+              {post.replyCount}
+            </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
-        testID="likeBtn"
-        style={[styles.ctrl, !big && styles.ctrlPad]}
-        onPress={() => {
-          requireAuth(() => onPressToggleLike())
-        }}
-        accessibilityRole="button"
-        accessibilityLabel={`${
-          post.viewer?.like ? _(msg`Unlike`) : _(msg`Like`)
-        } (${post.likeCount} ${pluralize(post.likeCount || 0, 'like')})`}
-        accessibilityHint=""
-        hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
-        {post.viewer?.like ? (
-          <HeartIconSolid style={s.likeColor} size={big ? 22 : 16} />
-        ) : (
-          <HeartIcon
-            style={[defaultCtrlColor, big ? styles.mt1 : undefined]}
-            strokeWidth={3}
-            size={big ? 20 : 16}
-          />
-        )}
-        {typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
-          <Text
-            testID="likeCount"
-            style={
-              post.viewer?.like
-                ? [s.bold, s.likeColor, s.f15, s.ml5]
-                : [defaultCtrlColor, s.f15, s.ml5]
-            }>
-            {post.likeCount}
-          </Text>
-        ) : undefined}
-      </TouchableOpacity>
+      <View style={styles.ctrl}>
+        <TouchableOpacity
+          testID="likeBtn"
+          style={[styles.btn, !big && styles.btnPad]}
+          onPress={() => {
+            requireAuth(() => onPressToggleLike())
+          }}
+          accessibilityRole="button"
+          accessibilityLabel={`${
+            post.viewer?.like ? _(msg`Unlike`) : _(msg`Like`)
+          } (${post.likeCount} ${pluralize(post.likeCount || 0, 'like')})`}
+          accessibilityHint=""
+          hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
+          {post.viewer?.like ? (
+            <HeartIconSolid style={s.likeColor} size={big ? 22 : 16} />
+          ) : (
+            <HeartIcon
+              style={[defaultCtrlColor, big ? styles.mt1 : undefined]}
+              strokeWidth={3}
+              size={big ? 20 : 16}
+            />
+          )}
+          {typeof post.likeCount !== 'undefined' && post.likeCount > 0 ? (
+            <Text
+              testID="likeCount"
+              style={
+                post.viewer?.like
+                  ? [s.bold, s.likeColor, s.f15, s.ml5]
+                  : [defaultCtrlColor, s.f15, s.ml5]
+              }>
+              {post.likeCount}
+            </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,
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 8e70534dc..cc3db50c8 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/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,
   },
diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx
index a888178a3..bbe5869fe 100644
--- a/src/view/com/util/post-ctrls/RepostButton.web.tsx
+++ b/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,
   },