Fix click targets for post controls (#332) (#363)

* Fix click targets for post controls (#332)

* Add padding to the right side of the post controls

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 9 insertions, 4 deletions

diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx
index 6904928f4..4497e7058 100644
--- a/src/view/com/util/PostCtrls.tsx
+++ b/src/view/com/util/PostCtrls.tsx
@@ -184,7 +184,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
 
   return (
     <View style={[styles.ctrls, opts.style]}>
-      <View style={s.flex1}>
+      <View>
         <TouchableOpacity
           testID="replyBtn"
           style={styles.ctrl}
@@ -202,7 +202,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
           ) : undefined}
         </TouchableOpacity>
       </View>
-      <View style={s.flex1}>
+      <View>
         <TouchableOpacity
           testID="repostBtn"
           hitSlop={HITSLOP}
@@ -243,7 +243,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
           ) : undefined}
         </TouchableOpacity>
       </View>
-      <View style={s.flex1}>
+      <View>
         <TouchableOpacity
           testID="likeBtn"
           style={styles.ctrl}
@@ -293,7 +293,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
           ) : undefined}
         </TouchableOpacity>
       </View>
-      <View style={s.flex1}>
+      <View>
         {opts.big ? undefined : (
           <PostDropdownBtn
             testID="postDropdownBtn"
@@ -321,6 +321,8 @@ export function PostCtrls(opts: PostCtrlsOpts) {
           </PostDropdownBtn>
         )}
       </View>
+      {/* used for adding pad to the right side */}
+      <View />
     </View>
   )
 }
@@ -328,10 +330,13 @@ export function PostCtrls(opts: PostCtrlsOpts) {
 const styles = StyleSheet.create({
   ctrls: {
     flexDirection: 'row',
+    justifyContent: 'space-between',
   },
   ctrl: {
     flexDirection: 'row',
     alignItems: 'center',
+    padding: 5,
+    margin: -5,
   },
   ctrlIconReposted: {
     color: colors.green3,