catalogscreen layout fix

src/screens/CatalogScreen.tsx

@@ -58,12 +58,13 @@ const SPACING = {
 
 const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;
 
-// Dynamic column calculation based on screen width
+// Dynamic column and spacing calculation based on screen width
 const calculateCatalogLayout = (screenWidth: number) => {
   const MIN_ITEM_WIDTH = 120;
   const MAX_ITEM_WIDTH = 180; // Increased for tablets
-  const HORIZONTAL_PADDING = SPACING.lg * 2;
-  const ITEM_SPACING = SPACING.sm;
+  // Increase padding and spacing on larger screens for proper breathing room
+  const HORIZONTAL_PADDING = screenWidth >= 1600 ? SPACING.xl * 4 : screenWidth >= 1200 ? SPACING.xl * 3 : screenWidth >= 1000 ? SPACING.xl * 2 : SPACING.lg * 2;
+  const ITEM_SPACING = screenWidth >= 1600 ? SPACING.xl : screenWidth >= 1200 ? SPACING.lg : screenWidth >= 1000 ? SPACING.md : SPACING.sm;
   
   // Calculate how many columns can fit
   const availableWidth = screenWidth - HORIZONTAL_PADDING;
@@ -80,9 +81,12 @@ const calculateCatalogLayout = (screenWidth: number) => {
   } else if (screenWidth < 1200) {
     // Large tablet: 4-6 columns
     numColumns = Math.min(Math.max(maxColumns, 4), 6);
-  } else {
-    // Very large screens: 5-8 columns
+  } else if (screenWidth < 1600) {
+    // Desktop-ish: 5-8 columns
     numColumns = Math.min(Math.max(maxColumns, 5), 8);
+  } else {
+    // Ultra-wide: 6-10 columns
+    numColumns = Math.min(Math.max(maxColumns, 6), 10);
   }
   
   // Calculate actual item width with proper spacing
@@ -90,11 +94,13 @@ const calculateCatalogLayout = (screenWidth: number) => {
   const itemWidth = (availableWidth - totalSpacing) / numColumns;
   
   // Ensure item width doesn't exceed maximum
-  const finalItemWidth = Math.min(itemWidth, MAX_ITEM_WIDTH);
+  const finalItemWidth = Math.floor(Math.min(itemWidth, MAX_ITEM_WIDTH));
   
   return {
     numColumns,
-    itemWidth: finalItemWidth
+    itemWidth: finalItemWidth,
+    itemSpacing: ITEM_SPACING,
+    containerPadding: HORIZONTAL_PADDING / 2, // use half per side for contentContainerStyle padding
   };
 };
 
@@ -109,9 +115,6 @@ const createStyles = (colors: any) => StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 16,
     paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 8 : 8,
-    // Center header on very wide screens
-    alignSelf: 'center',
-    maxWidth: 1400,
     width: '100%',
   },
   backButton: {
@@ -131,17 +134,11 @@ const createStyles = (colors: any) => StyleSheet.create({
     paddingHorizontal: 16,
     paddingBottom: 16,
     paddingTop: 8,
-    // Center title on very wide screens
-    alignSelf: 'center',
-    maxWidth: 1400,
     width: '100%',
   },
   list: {
     padding: SPACING.lg,
     paddingTop: SPACING.sm,
-    // Center content on very wide screens
-    alignSelf: 'center',
-    maxWidth: 1400, // Prevent content from being too wide on large screens
     width: '100%',
   },
   item: {
@@ -653,11 +650,12 @@ const CatalogScreen: React.FC<CatalogScreenProps> = ({ route, navigation }) => {
   const effectiveItemWidth = React.useMemo(() => {
     if (effectiveNumColumns === screenData.numColumns) return screenData.itemWidth;
     // recompute width for custom columns on mobile to maintain spacing roughly similar
-    const HORIZONTAL_PADDING = 16 * 2; // SPACING.lg * 2
-    const ITEM_SPACING = 8; // SPACING.sm
+    const HORIZONTAL_PADDING = (screenData as any).containerPadding ? (screenData as any).containerPadding * 2 : 16 * 2;
+    const ITEM_SPACING = (screenData as any).itemSpacing ?? 8;
     const availableWidth = screenData.width - HORIZONTAL_PADDING;
     const totalSpacing = ITEM_SPACING * (effectiveNumColumns - 1);
-    return (availableWidth - totalSpacing) / effectiveNumColumns;
+    const width = (availableWidth - totalSpacing) / effectiveNumColumns;
+    return Math.floor(width);
   }, [effectiveNumColumns, screenData.width, screenData.itemWidth]);
 
   // Helper function to optimize poster URLs
@@ -678,7 +676,7 @@ const CatalogScreen: React.FC<CatalogScreenProps> = ({ route, navigation }) => {
     // Calculate if this is the last item in a row
     const isLastInRow = (index + 1) % effectiveNumColumns === 0;
     // For proper spacing
-    const rightMargin = isLastInRow ? 0 : SPACING.sm;
+    const rightMargin = isLastInRow ? 0 : ((screenData as any).itemSpacing ?? SPACING.sm);
     
     return (
       <TouchableOpacity
@@ -841,6 +839,7 @@ const CatalogScreen: React.FC<CatalogScreenProps> = ({ route, navigation }) => {
           keyExtractor={(item) => `${item.id}-${item.type}`}
           numColumns={effectiveNumColumns}
           key={effectiveNumColumns}
+          ItemSeparatorComponent={() => <View style={{ height: ((screenData as any).itemSpacing ?? SPACING.sm) }} />}
           refreshControl={
             <RefreshControl
               refreshing={refreshing}
@@ -849,7 +848,7 @@ const CatalogScreen: React.FC<CatalogScreenProps> = ({ route, navigation }) => {
               tintColor={colors.primary}
             />
           }
-          contentContainerStyle={styles.list}
+          contentContainerStyle={[styles.list, { paddingHorizontal: (screenData as any).containerPadding ?? SPACING.lg, paddingTop: SPACING.sm, paddingBottom: SPACING.lg }]}
           showsVerticalScrollIndicator={false}
           removeClippedSubviews={true}
           getItemType={() => 'item'}