From 70fb186ad85a49554553352508c69138ccf62001 Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Mon, 11 Aug 2025 16:17:58 +0530
Subject: [PATCH] improved layout changes for tablets

---
 src/components/metadata/CastDetailsModal.tsx | 61 ++++++++++----------
 src/screens/SearchScreen.tsx                 | 52 +++++++++--------
 2 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/src/components/metadata/CastDetailsModal.tsx b/src/components/metadata/CastDetailsModal.tsx
index a1c01040..af7f7462 100644
--- a/src/components/metadata/CastDetailsModal.tsx
+++ b/src/components/metadata/CastDetailsModal.tsx
@@ -32,8 +32,9 @@ interface CastDetailsModalProps {
 }
 
 const { width, height } = Dimensions.get('window');
-const MODAL_WIDTH = Math.min(width - 40, 400);
-const MODAL_HEIGHT = height * 0.7;
+const isTablet = width >= 768;
+const MODAL_WIDTH = isTablet ? Math.min(width * 0.8, 800) : Math.min(width - 40, 400);
+const MODAL_HEIGHT = isTablet ? Math.min(height * 0.85, 700) : height * 0.7;
 
 interface PersonDetails {
   id: number;
@@ -165,7 +166,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
             width: MODAL_WIDTH,
             height: MODAL_HEIGHT,
             overflow: 'hidden',
-            borderRadius: 24,
+            borderRadius: isTablet ? 32 : 24,
             backgroundColor: Platform.OS === 'android' 
               ? 'rgba(20, 20, 20, 0.95)' 
               : 'transparent',
@@ -199,23 +200,23 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
         <LinearGradient
           colors={[
             currentTheme.colors.primary + 'DD',
-            currentTheme.colors.primaryVariant + 'CC',
+            currentTheme.colors.primary + 'AA',
           ]}
           style={{
-            padding: 20,
-            paddingTop: 24,
+            padding: isTablet ? 24 : 20,
+            paddingTop: isTablet ? 28 : 24,
           }}
         >
           <View style={{ flexDirection: 'row', alignItems: 'center' }}>
             <View style={{
-              width: 60,
-              height: 60,
-              borderRadius: 30,
+              width: isTablet ? 80 : 60,
+              height: isTablet ? 80 : 60,
+              borderRadius: isTablet ? 40 : 30,
               overflow: 'hidden',
-              marginRight: 16,
+              marginRight: isTablet ? 20 : 16,
               backgroundColor: 'rgba(255, 255, 255, 0.1)',
             }}>
-              {castMember.profile_path ? (
+              {castMember?.profile_path ? (
                 <Image
                   source={{
                     uri: `https://image.tmdb.org/t/p/w185${castMember.profile_path}`,
@@ -232,10 +233,10 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                 }}>
                   <Text style={{
                     color: '#fff',
-                    fontSize: 18,
+                    fontSize: isTablet ? 22 : 18,
                     fontWeight: '700',
                   }}>
-                    {castMember.name.split(' ').reduce((prev: string, current: string) => prev + current[0], '').substring(0, 2)}
+                    {castMember?.name?.split(' ').reduce((prev: string, current: string) => prev + current[0], '').substring(0, 2)}
                   </Text>
                 </View>
               )}
@@ -244,16 +245,16 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
             <View style={{ flex: 1 }}>
               <Text style={{
                 color: '#fff',
-                fontSize: 18,
+                fontSize: isTablet ? 22 : 18,
                 fontWeight: '800',
                 marginBottom: 4,
               }} numberOfLines={2}>
-                {castMember.name}
+                {castMember?.name}
               </Text>
-              {castMember.character && (
+              {castMember?.character && (
                 <Text style={{
                   color: 'rgba(255, 255, 255, 0.8)',
-                  fontSize: 14,
+                  fontSize: isTablet ? 16 : 14,
                   fontWeight: '500',
                 }} numberOfLines={2}>
                   as {castMember.character}
@@ -263,9 +264,9 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
 
             <TouchableOpacity
               style={{
-                width: 36,
-                height: 36,
-                borderRadius: 18,
+                width: isTablet ? 44 : 36,
+                height: isTablet ? 44 : 36,
+                borderRadius: isTablet ? 22 : 18,
                 backgroundColor: 'rgba(255, 255, 255, 0.2)',
                 justifyContent: 'center',
                 alignItems: 'center',
@@ -273,7 +274,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
               onPress={handleClose}
               activeOpacity={0.7}
             >
-              <MaterialIcons name="close" size={20} color="#fff" />
+              <MaterialIcons name="close" size={isTablet ? 24 : 20} color="#fff" />
             </TouchableOpacity>
           </View>
         </LinearGradient>
@@ -281,7 +282,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
         {/* Content */}
         <ScrollView
           style={{ flex: 1 }}
-          contentContainerStyle={{ padding: 20 }}
+          contentContainerStyle={{ padding: isTablet ? 28 : 20 }}
           showsVerticalScrollIndicator={false}
         >
           {loading ? (
@@ -405,16 +406,16 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                 <View style={{ marginBottom: 20 }}>
                   <Text style={{
                     color: '#fff',
-                    fontSize: 16,
+                    fontSize: isTablet ? 20 : 16,
                     fontWeight: '700',
-                    marginBottom: 12,
+                    marginBottom: isTablet ? 16 : 12,
                   }}>
                     Biography
                   </Text>
                   <Text style={{
                     color: 'rgba(255, 255, 255, 0.9)',
-                    fontSize: 14,
-                    lineHeight: 20,
+                    fontSize: isTablet ? 16 : 14,
+                    lineHeight: isTablet ? 24 : 20,
                     fontWeight: '400',
                   }}>
                     {personDetails.biography}
@@ -427,16 +428,16 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                 <View>
                   <Text style={{
                     color: '#fff',
-                    fontSize: 16,
+                    fontSize: isTablet ? 20 : 16,
                     fontWeight: '700',
-                    marginBottom: 12,
+                    marginBottom: isTablet ? 16 : 12,
                   }}>
                     Also Known As
                   </Text>
                   <Text style={{
                     color: 'rgba(255, 255, 255, 0.8)',
-                    fontSize: 14,
-                    lineHeight: 20,
+                    fontSize: isTablet ? 16 : 14,
+                    lineHeight: isTablet ? 24 : 20,
                   }}>
                     {personDetails.also_known_as.slice(0, 4).join(' • ')}
                   </Text>
diff --git a/src/screens/SearchScreen.tsx b/src/screens/SearchScreen.tsx
index 075efbe5..4780d13a 100644
--- a/src/screens/SearchScreen.tsx
+++ b/src/screens/SearchScreen.tsx
@@ -41,11 +41,14 @@ import { BlurView } from 'expo-blur';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '../contexts/ThemeContext';
 
-const { width } = Dimensions.get('window');
-const HORIZONTAL_ITEM_WIDTH = width * 0.3;
+const { width, height } = Dimensions.get('window');
+const isTablet = width >= 768;
+
+// Tablet-optimized poster sizes
+const HORIZONTAL_ITEM_WIDTH = isTablet ? width * 0.18 : width * 0.3;
 const HORIZONTAL_POSTER_HEIGHT = HORIZONTAL_ITEM_WIDTH * 1.5;
-const POSTER_WIDTH = 90;
-const POSTER_HEIGHT = 135;
+const POSTER_WIDTH = isTablet ? 70 : 90;
+const POSTER_HEIGHT = isTablet ? 105 : 135;
 const RECENT_SEARCHES_KEY = 'recent_searches';
 const MAX_RECENT_SEARCHES = 10;
 
@@ -740,30 +743,30 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollViewContent: {
-    paddingBottom: 20,
+    paddingBottom: isTablet ? 120 : 100, // Extra padding for tablet bottom nav
     paddingHorizontal: 0,
   },
   carouselContainer: {
-    marginBottom: 24,
+    marginBottom: isTablet ? 32 : 24,
   },
   carouselTitle: {
-    fontSize: 18,
+    fontSize: isTablet ? 20 : 18,
     fontWeight: '700',
-    marginBottom: 12,
+    marginBottom: isTablet ? 16 : 12,
     paddingHorizontal: 16,
   },
   horizontalListContent: {
-    paddingHorizontal: 12,
-    paddingRight: 8,
+    paddingHorizontal: isTablet ? 16 : 12,
+    paddingRight: isTablet ? 12 : 8,
   },
   horizontalItem: {
     width: HORIZONTAL_ITEM_WIDTH,
-    marginRight: 12,
+    marginRight: isTablet ? 16 : 12,
   },
   horizontalItemPosterContainer: {
     width: HORIZONTAL_ITEM_WIDTH,
     height: HORIZONTAL_POSTER_HEIGHT,
-    borderRadius: 8,
+    borderRadius: 16,
     overflow: 'hidden',
     marginBottom: 8,
     borderWidth: 1,
@@ -773,27 +776,27 @@ const styles = StyleSheet.create({
     height: '100%',
   },
   horizontalItemTitle: {
-    fontSize: 14,
+    fontSize: isTablet ? 12 : 14,
     fontWeight: '600',
-    lineHeight: 18,
+    lineHeight: isTablet ? 16 : 18,
     textAlign: 'left',
   },
   yearText: {
-    fontSize: 12,
+    fontSize: isTablet ? 10 : 12,
     marginTop: 2,
   },
   recentSearchesContainer: {
     paddingHorizontal: 16,
-    paddingBottom: 16,
-    paddingTop: 8,
+    paddingBottom: isTablet ? 24 : 16,
+    paddingTop: isTablet ? 12 : 8,
     borderBottomWidth: 1,
     borderBottomColor: 'rgba(255,255,255,0.05)',
-    marginBottom: 8,
+    marginBottom: isTablet ? 16 : 8,
   },
   recentSearchItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 10,
+    paddingVertical: isTablet ? 12 : 10,
     paddingHorizontal: 16,
     marginVertical: 1,
   },
@@ -820,7 +823,8 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: 32,
+    paddingHorizontal: isTablet ? 64 : 32,
+    paddingBottom: isTablet ? 120 : 100,
   },
   emptyText: {
     fontSize: 18,
@@ -847,7 +851,7 @@ const styles = StyleSheet.create({
   skeletonPoster: {
     width: POSTER_WIDTH,
     height: POSTER_HEIGHT,
-    borderRadius: 8,
+    borderRadius: 12,
   },
   skeletonItemDetails: {
     flex: 1,
@@ -886,7 +890,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
   },
   itemTypeText: {
-    fontSize: 8,
+    fontSize: isTablet ? 7 : 8,
     fontWeight: '700',
   },
   ratingContainer: {
@@ -901,7 +905,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
   },
   ratingText: {
-    fontSize: 10,
+    fontSize: isTablet ? 9 : 10,
     fontWeight: '700',
     marginLeft: 2,
   },
@@ -935,4 +939,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default SearchScreen; 
\ No newline at end of file
+export default SearchScreen;
\ No newline at end of file