small fix

src/screens/InAppScreens/TravelsScreen/EventScreen/index.tsx

@@ -129,7 +129,7 @@ const EventScreen = ({ route }: { route: any }) => {
       setPhotos(data.data.photos);
 
       const partisipantsWidth = contentWidth / 2;
-      setMaxVisibleParticipants(Math.floor(partisipantsWidth / 20));
+      setMaxVisibleParticipants(Math.floor(partisipantsWidth / 22));
       setMaxVisibleParticipantsWithGap(Math.floor(partisipantsWidth / 32));
       setFilteredParticipants(data.data.participants_data.filter((p) => p.avatar));
 
@@ -688,81 +688,6 @@ const EventScreen = ({ route }: { route: any }) => {
               </TouchableOpacity>
             </View>
 
-            {joined ? (
-              <TouchableOpacity
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  paddingVertical: 8,
-                  paddingHorizontal: 12,
-                  borderRadius: 20,
-                  backgroundColor: Colors.WHITE,
-                  gap: 6,
-                  borderWidth: 1,
-                  borderColor: Colors.DARK_BLUE
-                }}
-                onPress={handleUnjoinEvent}
-              >
-                <CalendarCrossedIcon fill={Colors.DARK_BLUE} width={16} height={16} />
-                <Text
-                  style={{
-                    color: Colors.DARK_BLUE,
-                    fontSize: getFontSize(14),
-                    fontFamily: 'montserrat-700'
-                  }}
-                >
-                  Cancel
-                </Text>
-              </TouchableOpacity>
-            ) : !event.full ? (
-              <TouchableOpacity
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  paddingVertical: 8,
-                  paddingHorizontal: 12,
-                  borderRadius: 20,
-                  backgroundColor: Colors.ORANGE,
-                  gap: 6,
-                  borderWidth: 1,
-                  borderColor: Colors.ORANGE
-                }}
-                onPress={handleJoinEvent}
-              >
-                {event.settings.free ? (
-                  <>
-                    <GigtIcon fill={Colors.WHITE} width={16} height={16} />
-                    <Text
-                      style={{
-                        color: Colors.WHITE,
-                        fontSize: getFontSize(14),
-                        fontFamily: 'montserrat-700',
-                        textTransform: 'uppercase'
-                      }}
-                    >
-                      Join - free
-                    </Text>
-                  </>
-                ) : (
-                  <>
-                    <CalendarCheckIcon fill={Colors.WHITE} width={16} height={16} />
-                    <Text
-                      style={{
-                        color: Colors.WHITE,
-                        fontSize: getFontSize(14),
-                        fontFamily: 'montserrat-700',
-                        textTransform: 'uppercase'
-                      }}
-                    >
-                      Join - {event.settings.price}
-                    </Text>
-                  </>
-                )}
-              </TouchableOpacity>
-            ) : null}
-
             <View style={styles.divider} />
 
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
@@ -889,7 +814,7 @@ const EventScreen = ({ route }: { route: any }) => {
                 <View style={{ gap: 8, flex: 1 }}>
                   <Text style={[styles.travelSeriesTitle, { fontSize: 12 }]}>Participants</Text>
 
-                  <View style={[styles.statItem, { justifyContent: 'flex-end' }]}>
+                  <View style={[styles.statItem, { justifyContent: 'flex-start' }]}>
                     <View style={styles.userImageContainer}>
                       {(filteredParticipants.length > maxVisibleParticipants
                         ? filteredParticipants.slice(0, maxVisibleParticipants - 1)
@@ -924,7 +849,8 @@ const EventScreen = ({ route }: { route: any }) => {
                               source={{ uri: API_HOST + user.avatar }}
                               style={[
                                 styles.userImage,
-                                filteredParticipants.length > maxVisibleParticipantsWithGap
+                                filteredParticipants.length > maxVisibleParticipantsWithGap &&
+                                index !== 0
                                   ? { marginLeft: -10 }
                                   : {}
                               ]}
@@ -945,6 +871,81 @@ const EventScreen = ({ route }: { route: any }) => {
               )}
             </View>
 
+            {joined ? (
+              <TouchableOpacity
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  paddingVertical: 8,
+                  paddingHorizontal: 12,
+                  borderRadius: 20,
+                  backgroundColor: Colors.WHITE,
+                  gap: 6,
+                  borderWidth: 1,
+                  borderColor: Colors.DARK_BLUE
+                }}
+                onPress={handleUnjoinEvent}
+              >
+                <CalendarCrossedIcon fill={Colors.DARK_BLUE} width={16} height={16} />
+                <Text
+                  style={{
+                    color: Colors.DARK_BLUE,
+                    fontSize: getFontSize(14),
+                    fontFamily: 'montserrat-700'
+                  }}
+                >
+                  Cancel
+                </Text>
+              </TouchableOpacity>
+            ) : !event.full ? (
+              <TouchableOpacity
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  paddingVertical: 8,
+                  paddingHorizontal: 12,
+                  borderRadius: 20,
+                  backgroundColor: Colors.ORANGE,
+                  gap: 6,
+                  borderWidth: 1,
+                  borderColor: Colors.ORANGE
+                }}
+                onPress={handleJoinEvent}
+              >
+                {event.settings.free ? (
+                  <>
+                    <GigtIcon fill={Colors.WHITE} width={16} height={16} />
+                    <Text
+                      style={{
+                        color: Colors.WHITE,
+                        fontSize: getFontSize(14),
+                        fontFamily: 'montserrat-700',
+                        textTransform: 'uppercase'
+                      }}
+                    >
+                      Join - free
+                    </Text>
+                  </>
+                ) : (
+                  <>
+                    <CalendarCheckIcon fill={Colors.WHITE} width={16} height={16} />
+                    <Text
+                      style={{
+                        color: Colors.WHITE,
+                        fontSize: getFontSize(14),
+                        fontFamily: 'montserrat-700',
+                        textTransform: 'uppercase'
+                      }}
+                    >
+                      Join - {event.settings.price}
+                    </Text>
+                  </>
+                )}
+              </TouchableOpacity>
+            ) : null}
+
             <View style={[styles.divider]} />
 
             {event.settings.details && event.settings.details.length ? (