From eadcee59eef2d3552bb97ef22dee5de5e5ad9490 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Mon, 14 Mar 2022 21:55:11 -0700
Subject: [PATCH 1/2] UserItem: Fix recent regression where UnreadCount was
 misaligned

See the code comments, and see screenshots of the bug at
  https://github.com/zulip/zulip-mobile/pull/5277#discussion_r826575976

And Greg's suggestion to use this spacer View, to help keep the code
simpler:
  https://github.com/zulip/zulip-mobile/pull/5297#issuecomment-1068605190
---
 src/users/UserItem.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/users/UserItem.js b/src/users/UserItem.js
index 50706ae28d9..9251069b486 100644
--- a/src/users/UserItem.js
+++ b/src/users/UserItem.js
@@ -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>

From 72f21d55c7df993814fc064d4121af817544fb99 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Tue, 15 Mar 2022 18:26:40 -0700
Subject: [PATCH 2/2] UserItem: Fix overflow when name is very long

---
 src/users/UserItem.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/users/UserItem.js b/src/users/UserItem.js
index 9251069b486..0a38cca84a6 100644
--- a/src/users/UserItem.js
+++ b/src/users/UserItem.js
@@ -24,6 +24,9 @@ const componentStyles = createStyleSheet({
   text: {
     marginLeft: 16,
   },
+  textWrapper: {
+    flexShrink: 1,
+  },
   selectedText: {
     color: 'white',
   },
@@ -33,6 +36,7 @@ const componentStyles = createStyleSheet({
   },
   spacer: {
     flex: 1,
+    minWidth: 4,
   },
 });
 
@@ -77,7 +81,7 @@ export function UserItemRaw<
           isMuted={isMuted}
           onPress={onPress && handlePress}
         />
-        <View>
+        <View style={componentStyles.textWrapper}>
           <ZulipText
             style={[componentStyles.text, isSelected && componentStyles.selectedText]}
             text={isMuted ? _('Muted user') : user.full_name}