series ranking small screen fix

src/screens/InAppScreens/TravellersScreen/Components/SeriesRankingItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, TouchableOpacity, View, Image } from 'react-native';
+import { Text, TouchableOpacity, View, Image, Dimensions } from 'react-native';
 import * as FileSystem from 'expo-file-system';
 
 import { AvatarWithInitials } from '../../../../components';
@@ -10,6 +10,7 @@ import { Colors } from 'src/theme';
 import { SeriesRanking } from '../utils/types';
 import { ProfileStyles, ScoreStyles } from './styles';
 import { useConnection } from 'src/contexts/ConnectionContext';
+import formatNumber from '../../TravelsScreen/utils/formatNumber';
 
 import TickIcon from 'assets/icons/tick.svg';
 import UNIcon from 'assets/icons/un_icon.svg';
@@ -27,6 +28,7 @@ const SeriesRankingItem = React.memo(
     onPress: (userId: number) => void;
   }) => {
     const netInfo = useConnection();
+    const isSmallScreen = Dimensions.get('window').width < 383;
 
     const avatarBaseUri = netInfo?.isInternetReachable
       ? API_HOST + item.avatar
@@ -74,8 +76,8 @@ const SeriesRankingItem = React.memo(
             >
               {item.first_name ?? ''} {item.last_name ?? ''}
             </Text>
-            <View style={ProfileStyles.profileDataContainer}>
-              <View style={ProfileStyles.profileDataWrapper}>
+            <View style={[ProfileStyles.profileDataContainer, { flex: 1 }]}>
+              <View style={[ProfileStyles.profileDataWrapper, isSmallScreen ? { gap: 6 } : {}]}>
                 <Text style={ProfileStyles.profileAge}>Age: {item.age ?? ''}</Text>
                 <Image
                   source={{ uri: flagBaseUri(item.flag1) }}
@@ -87,23 +89,26 @@ const SeriesRankingItem = React.memo(
                     style={[ProfileStyles.countryFlag, { marginLeft: -15 }]}
                   />
                 ) : null}
-                <View style={ProfileStyles.badgesWrapper}>
+                <View style={[ProfileStyles.badgesWrapper, isSmallScreen ? { marginLeft: 4 } : {}]}>
                   {item.authenticated === 1 ? <TickIcon /> : null}
                   {item.badge_un === 1 ? <UNIcon /> : null}
                   {item.badge_nm === 1 ? <NMIcon /> : null}
                 </View>
               </View>
 
-              <View style={ProfileStyles.rightScore}>
+              <View style={[ProfileStyles.rightScore, { flex: 1, justifyContent: 'flex-end' }]}>
                 <Text
                   style={[
-                    { fontWeight: 'bold', fontSize: 16 },
+                    {
+                      fontWeight: 'bold',
+                      fontSize: isSmallScreen ? 12 : 16
+                    },
                     item.recent_score_increase
                       ? { color: Colors.ORANGE }
                       : { color: Colors.DARK_BLUE }
                   ]}
                 >
-                  {item.score}
+                  {isSmallScreen ? formatNumber(item.score) : item.score}
                 </Text>
                 {item.recent_score_increase ? (
                   <ArrowIcon stroke={Colors.ORANGE} />