Spacing fixes

src/view/com/post/Post.tsx

@@ -160,7 +160,7 @@ export const Post = observer(function Post({
             timestamp={item.post.indexedAt}
           />
           {replyHref !== '' && (
-            <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
+            <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
               <FontAwesomeIcon
                 icon="reply"
                 size={9}

src/view/com/posts/FeedItem.tsx

@@ -183,7 +183,7 @@ export const FeedItem = observer(function ({
               timestamp={item.post.indexedAt}
             />
             {!isChild && replyHref !== '' && (
-              <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
+              <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
                 <FontAwesomeIcon
                   icon="reply"
                   size={9}
@@ -219,8 +219,9 @@ export const FeedItem = observer(function ({
             ) : (
               <View style={{height: 5}} />
             )}
-            <PostEmbeds embed={item.post.embed} style={styles.postEmbeds} />
+            <PostEmbeds embed={item.post.embed} style={styles.embed} />
             <PostCtrls
+              style={styles.ctrls}
               itemHref={itemHref}
               itemTitle={itemTitle}
               isAuthor={item.post.author.did === store.me.did}
@@ -330,8 +331,11 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     paddingBottom: 4,
   },
-  postEmbeds: {
+  embed: {
-    marginBottom: 0,
+    marginBottom: 6,
+  },
+  ctrls: {
+    marginTop: 2,
   },
   viewFullThread: {
     paddingTop: 12,

src/view/com/util/PostCtrls.tsx

@@ -1,5 +1,12 @@
 import React from 'react'
-import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
+import {
+  Animated,
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback'
 import {Text} from './text/Text'
@@ -13,6 +20,7 @@ interface PostCtrlsOpts {
   itemTitle: string
   isAuthor: boolean
   big?: boolean
+  style?: StyleProp<ViewStyle>
   replyCount?: number
   repostCount?: number
   upvoteCount?: number
@@ -102,7 +110,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
   }
 
   return (
-    <View style={styles.ctrls}>
+    <View style={[styles.ctrls, opts.style]}>
       <View style={s.flex1}>
         <TouchableOpacity
           style={styles.ctrl}
@@ -187,7 +195,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
             <FontAwesomeIcon
               icon="ellipsis-h"
               size={16}
-              style={[s.mt2, s.mr5, sRedgray]}
+              style={[s.mt2, s.mr5, {color: colors.gray3}]}
             />
           </PostDropdownBtn>
         )}

src/view/com/util/PostEmbeds.tsx

@@ -31,7 +31,7 @@ export function PostEmbeds({
       }
       if (embed.images.length === 4) {
         return (
-          <View style={styles.imagesContainer}>
+          <View style={[styles.imagesContainer, style]}>
             <ImageLayoutGrid
               type="four"
               uris={embed.images.map(img => img.thumb)}
@@ -41,7 +41,7 @@ export function PostEmbeds({
         )
       } else if (embed.images.length === 3) {
         return (
-          <View style={styles.imagesContainer}>
+          <View style={[styles.imagesContainer, style]}>
             <ImageLayoutGrid
               type="three"
               uris={embed.images.map(img => img.thumb)}
@@ -51,7 +51,7 @@ export function PostEmbeds({
         )
       } else if (embed.images.length === 2) {
         return (
-          <View style={styles.imagesContainer}>
+          <View style={[styles.imagesContainer, style]}>
             <ImageLayoutGrid
               type="two"
               uris={embed.images.map(img => img.thumb)}
@@ -61,7 +61,7 @@ export function PostEmbeds({
         )
       } else {
         return (
-          <View style={styles.imagesContainer}>
+          <View style={[styles.imagesContainer, style]}>
             <AutoSizedImage
               uri={embed.images[0].thumb}
               onPress={() => openLightbox(0)}
@@ -82,7 +82,7 @@ export function PostEmbeds({
         {link.thumb ? (
           <AutoSizedImage uri={link.thumb} containerStyle={{borderRadius: 4}} />
         ) : undefined}
-        <Text type="h5" numberOfLines={1} style={pal.text}>
+        <Text type="h5" numberOfLines={2} style={pal.text}>
           {link.title || link.uri}
         </Text>
         <Text type="body2" numberOfLines={1} style={pal.textLight}>
@@ -105,11 +105,12 @@ export function PostEmbeds({
 const styles = StyleSheet.create({
   imagesContainer: {
     marginTop: 4,
-    marginBottom: 6,
   },
   extOuter: {
     padding: 10,
     borderWidth: 1,
+    borderRadius: 4,
+    marginTop: 4,
   },
   extDescription: {
     marginTop: 4,

src/view/com/util/PostMeta.tsx

@@ -67,6 +67,6 @@ const styles = StyleSheet.create({
     paddingRight: 5,
   },
   maxWidth: {
-    maxWidth: '70%',
+    maxWidth: '80%',
   },
 })

src/view/com/util/UserInfoText.tsx

@@ -62,7 +62,9 @@ export function UserInfoText({
     )
   } else if (profile) {
     inner = (
-      <Text type={type} style={style}>{`${prefix || ''}${profile[attr]}`}</Text>
+      <Text type={type} style={style}>{`${prefix || ''}${
+        profile[attr] || profile.handle
+      }`}</Text>
     )
   } else {
     inner = (