Merge pull request Expensify#76254 from thelullabyy/fix/75176/last-three-avatars

Profile - Last three avatars are not arranged side by side when display name is not English

Author: grgia

src/components/AvatarSelector.tsx

@@ -29,6 +29,8 @@ type AvatarSelectorProps = {
     label?: string;
 };
 
+const SPACER_SIZE = 10;
+
 /**
  * AvatarSelector — renders a grid of selectable avatars.
  */
@@ -39,6 +41,8 @@ function AvatarSelector({selectedID, onSelect, label, name, size = CONST.AVATAR_
     const StyleUtils = useStyleUtils();
     const {avatarList} = useLetterAvatars(name, size);
 
+    const iconSize = StyleUtils.getAvatarSize(size);
+
     return (
         <>
             {!!label && avatarList?.length > 0 && (
@@ -89,6 +93,15 @@ function AvatarSelector({selectedID, onSelect, label, name, size = CONST.AVATAR_
                         </PressableWithFeedback>
                     );
                 })}
+                {/* We need to add several invisible items at the end of the avatar list to guarantee that the last row avatars are aligned properly */}
+                {[...Array(SPACER_SIZE).keys()].map((i) => (
+                    <View
+                        key={`spacer-${i}`}
+                        style={[styles.avatarSelectorWrapper]}
+                    >
+                        <View style={{width: iconSize, height: iconSize}} />
+                    </View>
+                ))}
             </View>
         </>
     );