UI series fix for small screens

src/screens/InAppScreens/MapScreen/MultipleSeriesModal/index.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { View, Text, Image, StyleSheet, TouchableOpacity, Platform, Share } from 'react-native';
+import { View, Text, Image, StyleSheet, TouchableOpacity, Platform, Share, Dimensions } from 'react-native';
 import ActionSheet, { SheetManager } from 'react-native-actions-sheet';
 import ShareIcon from '../../../../../assets/icons/share.svg';
 import { Colors } from 'src/theme';
@@ -11,6 +11,7 @@ import { NAVIGATION_PAGES } from 'src/types';
 import { useSubscription } from 'src/screens/OfflineMapsScreen/useSubscription';
 
 const MultipleSeriesModal = () => {
+  const isSmallScreen = Dimensions.get('window').width < 383;
   const navigation = useNavigation();
   const { isPremium, loading } = useSubscription();
   const [seriesData, setSeriesData] = useState<any>(null);
@@ -157,19 +158,19 @@ const MultipleSeriesModal = () => {
                         </TouchableOpacity>
                       )}
 
-                      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                      <View style={{ flexDirection: 'row', alignItems: 'center', gap: isSmallScreen ? 4 : 8 }}>
                         <TouchableOpacity
                           onPress={() => handleToggleSeries(item)}
-                          style={[styles.markButton, item.visited === 1 && styles.visitedButton]}
+                          style={[styles.markButton, isSmallScreen ? { paddingHorizontal: 8 } : {}, item.visited === 1 && styles.visitedButton]}
                         >
                           {item.visited === 1 ? (
                             <View style={styles.completedContainer}>
-                              <Text style={[styles.calloutButtonText, { color: Colors.DARK_BLUE }]}>
+                              <Text style={[styles.calloutButtonText, { color: Colors.DARK_BLUE }, isSmallScreen ? { fontSize: getFontSize(12) } : {}]}>
                                 Completed
                               </Text>
                             </View>
                           ) : (
-                            <Text style={styles.calloutButtonText}>To Complete</Text>
+                            <Text style={[styles.calloutButtonText, isSmallScreen ? { fontSize: getFontSize(12) } : {}]}>To Complete</Text>
                           )}
                         </TouchableOpacity>
                         
@@ -241,7 +242,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: Colors.FILL_LIGHT,
     paddingVertical: 8,
-    paddingHorizontal: 12,
+    paddingHorizontal: 10,
     borderRadius: 8,
     marginBottom: 6
   },

src/screens/InAppScreens/MapScreen/UniversalSearch/styles.tsx

@@ -65,7 +65,7 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: Colors.FILL_LIGHT,
     paddingVertical: 8,
-    paddingHorizontal: 12,
+    paddingHorizontal: 10,
     borderRadius: 8,
     marginBottom: 6
   },