Fix modal safe area handling for proper screen orientation

- HomeScreen: Use useSafeAreaInsets for detail modal to prevent content going under status bar/notch
- InfoScreen: Use dynamic safe area insets for image viewer header
- Add statusBarTranslucent prop to modal for proper behavior
- Remove fixed paddingTop from InfoScreen imageViewerHeader style
- Add bottom safe area padding for proper scrollview handling

Author: mithun50

screens/HomeScreen.tsx

@@ -13,7 +13,10 @@ import {
   RefreshControl,
   Linking,
   ScrollView,
+  StatusBar,
+  Platform,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTranslation } from 'react-i18next';
 import { Ionicons } from '@expo/vector-icons';
 import { db } from '../firebase.config';
@@ -121,6 +124,7 @@ const getDirectImageUrl = (url: string): string => {
 
 export default function HomeScreen() {
   const { t, i18n } = useTranslation();
+  const insets = useSafeAreaInsets();
   const [content, setContent] = useState<ContentItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
@@ -766,8 +770,10 @@ export default function HomeScreen() {
         transparent={false}
         visible={modalVisible}
         onRequestClose={closeModal}
+        statusBarTranslucent={true}
       >
-        <SafeAreaView style={styles.modalContainer}>
+        <View style={[styles.modalContainer, { paddingTop: insets.top }]}>
+          <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
           {/* Modal Header */}
           <View style={styles.modalHeader}>
             <TouchableOpacity onPress={closeModal} style={styles.closeButton}>
@@ -924,9 +930,9 @@ export default function HomeScreen() {
               )}
             </View>
 
-            <View style={styles.bottomSpacing} />
+            <View style={[styles.bottomSpacing, { paddingBottom: insets.bottom }]} />
           </ScrollView>
-        </SafeAreaView>
+        </View>
       </Modal>
     );
   };

screens/InfoScreen.tsx

@@ -13,7 +13,9 @@ import {
   Dimensions,
   Image,
   Modal,
+  Platform,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import { Ionicons } from '@expo/vector-icons';
 import { useTranslation } from 'react-i18next';
@@ -91,6 +93,7 @@ interface ContentItem {
 
 export default function InfoScreen() {
   const { t, i18n } = useTranslation();
+  const insets = useSafeAreaInsets();
   const [location, setLocation] = useState<Location.LocationObject | null>(null);
   const [weather, setWeather] = useState<WeatherData | null>(null);
   const [aiResponse, setAiResponse] = useState<AIResponse>({
@@ -1395,7 +1398,7 @@ Keep the response concise, practical, and actionable for farmers. Remember to re
             onCancel={() => setSelectedImage(null)}
             backgroundColor="rgba(0, 0, 0, 0.9)"
             renderHeader={(currentIndex) => (
-              <View style={styles.imageViewerHeader}>
+              <View style={[styles.imageViewerHeader, { paddingTop: insets.top + 10 }]}>
                 <TouchableOpacity
                   style={styles.imageViewerClose}
                   onPress={() => setSelectedImage(null)}
@@ -2042,7 +2045,6 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     zIndex: 10,
-    paddingTop: 50,
     paddingHorizontal: 20,
   },
   imageViewerTitle: {