[native] simplify RelationshipListItem jsx

Summary: Small refactor diff to simplify the JSX being returned in `RelationshipListItem`

Test Plan: Confirmed that `RelationshipListItem` still looks and behaves the same

Reviewers: atul, inka

Reviewed By: atul

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D9285

native/profile/relationship-list-item.react.js

@@ -166,14 +166,12 @@ class RelationshipListItem extends React.PureComponent<Props> {
     }
 
     return (
-      <View style={this.props.styles.container}>
-        <View style={[this.props.styles.innerContainer, borderBottom]}>
-          <UserAvatar size="S" userID={this.props.userInfo.id} />
-          <SingleLine style={this.props.styles.username}>
-            {this.props.userInfo.username}
-          </SingleLine>
-          {editButton}
-        </View>
+      <View style={[this.props.styles.container, borderBottom]}>
+        <UserAvatar size="S" userID={this.props.userInfo.id} />
+        <SingleLine style={this.props.styles.username}>
+          {this.props.userInfo.username}
+        </SingleLine>
+        {editButton}
       </View>
     );
   }
@@ -269,19 +267,13 @@ class RelationshipListItem extends React.PureComponent<Props> {
 }
 
 const unboundStyles = {
-  editButton: {
-    paddingLeft: 10,
-  },
   container: {
     flex: 1,
-    paddingHorizontal: 12,
-    backgroundColor: 'panelForeground',
-  },
-  innerContainer: {
+    flexDirection: 'row',
+    paddingHorizontal: 24,
     paddingVertical: 10,
-    paddingHorizontal: 12,
+    backgroundColor: 'panelForeground',
     borderColor: 'panelForegroundBorder',
-    flexDirection: 'row',
   },
   borderBottom: {
     borderBottomWidth: 1,
@@ -299,6 +291,9 @@ const unboundStyles = {
     lineHeight: 20,
     marginLeft: 8,
   },
+  editButton: {
+    paddingLeft: 10,
+  },
   blueAction: {
     color: 'link',
     fontSize: 16,