UserItem: Fix recent regression where UnreadCount was misaligned

[chrisbobbe]

See the code comments, and see screenshots of the bug at
#5277 (comment)

[gnprice]

Thanks!

Let's do this by inserting a spacer View, rather than wrapping in a wrapper View. Like this:

@@ -31,6 +31,9 @@ const componentStyles = createStyleSheet({
     fontSize: 10,
     color: 'hsl(0, 0%, 60%)',
   },
+  spacer: {
+    flex: 1,
+  },
 });
 
 type Props<UserT> = $ReadOnly<{|
@@ -103,6 +106,7 @@ export function UserItemRaw<
             />
           </View>
         )}
+        <View style={componentStyles.spacer} />
         <UnreadCount count={unreadCount} inverse={isSelected} />
       </View>
     </Touchable>

I think that keeps the code simpler.

[chrisbobbe]

Thanks for the review! Revision pushed, along with a fix for a bug on main that we discovered in the office.

[gnprice]

Thanks! Looks good; merging.