Tablet View Optimization

src/components/molecules/Cards/HorizontalNewsCardVariant.js

@@ -2,7 +2,7 @@ import { StyleSheet, Text, View, TouchableOpacity, TouchableWithoutFeedback, Ima
 import React, { useContext } from 'react'
 import BookmarkButton from '../../atoms/Buttons/BookmarkButton'
 import ShareButton from '../../atoms/Buttons/ShareButton'
-import { moderateScale, screenWidth, verticalScale } from '../../../constants/metrics'
+import { horizontalScale, moderateScale, screenWidth, verticalScale } from '../../../constants/metrics'
 import fonts from '../../../constants/fonts'
 import colors from '../../../constants/colors'
 import { getScreenType, getTimestamp } from '../../../constants/functions'
@@ -20,11 +20,11 @@ const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagli
     cardContainer: {
       borderRadius: moderateScale(16),
       width: 'auto',
-      maxWidth: getScreenType === "Mobile" ? 320 :  screenWidth,
+      maxWidth: 340,
       maxHeight: verticalScale(220),
       backgroundColor: currentTheme === 'light' ? colors().white: colors().black_variant,
-      elevation: 2,
-     
+      elevation: 4,
+      marginHorizontal: horizontalScale(8),
       padding: moderateScale(16)
       // paddingBottom:fonts.getSize(24)
     },

src/components/organisms/Sections/CategorySection.js

@@ -146,15 +146,15 @@ const CategorySection = ({ navigation }) => {
       fontSize: moderateScale(12),
       color: colors().recessive,
     },
-    categoriesNewsContainer: getScreenType === "mobile" ? {
+    categoriesNewsContainer: {
       paddingHorizontal: horizontalScale(16),
       paddingTop: verticalScale(10),
       backgroundColor: colors().dominant,
-      gap: moderateScale(8),
+      gap: moderateScale(16),
       flexWrap: 'wrap',
       flexDirection: 'row'
 
-    } : {},
+    },
   });
 
 

src/screens/Bookmarks/BookmarkPage.js

@@ -18,7 +18,8 @@ const BookmarkPage = props => {
       backgroundColor: colors().dominant,
       paddingVertical: verticalScale(16),
       paddingHorizontal: horizontalScale(16),
-      gap: verticalScale(8)
+      gap: verticalScale(8),
+      flexDirection:'row'
     }
   })
 

src/screens/Profile/ProfilePage.js

@@ -166,6 +166,7 @@ const ProfilePage = props => {
         <View style={styles.profileCardContainer}>
           <FlatList
             scrollEnabled={false}
+            contentContainerStyle={{flexDirection: 'row', flexWrap: 'wrap'}}
             showsVerticalScrollIndicator={false}
             ItemSeparatorComponent={() => (
               <View style={{ height: verticalScale(8) }}></View>