Song Card: Rework Layout for responsivity

front/components/SongCard.tsx

@@ -15,22 +15,22 @@ const SongCard = (props: SongCardProps) => {
 	return (
 		<Card
 			shadow={3}
-			flexDirection='column'
-			alignContent='space-around'
 			onPress={() => navigation.navigate('Song', { songId })}
 		>
-			<Image
+			<VStack m={1.5} space={3}>
-				style={{ zIndex: 0, aspectRatio: 1, margin: 5, borderRadius: CardBorderRadius}}
+				<Image
-				source={{ uri: albumCover }}
+					style={{ zIndex: 0, aspectRatio: 1, borderRadius: CardBorderRadius}}
-				alt={[props.songTitle, props.artistName].join('-')}
+					source={{ uri: albumCover }}
-			/>
+					alt={[props.songTitle, props.artistName].join('-')}
-			<VStack padding={3}>
+				/>
-				<Text isTruncated bold fontSize='md' noOfLines={2} height={50}>
+				<VStack>
-					{songTitle}
+					<Text isTruncated bold fontSize='md' noOfLines={2} height={50}>
-				</Text>
+						{songTitle}
-				<Text isTruncated >
+					</Text>
-					{artistName}
+					<Text isTruncated >
-				</Text>
+						{artistName}
+					</Text>
+				</VStack>
 			</VStack>
 		</Card>
 	)

front/components/SongCardGrid.tsx

@@ -2,23 +2,20 @@ import React from 'react';
 import SongCard from './SongCard';
 import { FlatGrid } from 'react-native-super-grid';
 import { Heading, VStack } from 'native-base';
-import { RequireExactlyOne } from 'type-fest';
 
 type SongCardGrid = {
 	songs: Parameters<typeof SongCard>[0][];
 	heading?: JSX.Element,
-} & RequireExactlyOne<{
+	maxItemsPerRow?: number,
-	maxItemsPerRow: number,
+	style?: Parameters<typeof FlatGrid>[0]['additionalRowStyle']
-	itemDimension: number,
+}
-}>
 
 const SongCardGrid = (props: SongCardGrid) => {
 	return <VStack space={5}>
 		<Heading>{props.heading}</Heading>
 		<FlatGrid
 			maxItemsPerRow={props.maxItemsPerRow}
-			itemDimension={props.itemDimension ?? (props.maxItemsPerRow ? undefined : 150)}
+			additionalRowStyle={props.style ?? { justifyContent: 'flex-start' }}
-			additionalRowStyle={{ justifyContent: 'flex-start' }}
 			data={props.songs}
 			renderItem={({ item }) => <SongCard {...item} /> }
 			spacing={10}

front/views/HomeView.tsx

@@ -47,7 +47,6 @@ const HomeView = () => {
 			<VStack flex={{ lg: 2 }} space={5}>
 				<SongCardGrid
 					heading={<Translate translationKey='goNextStep'/>}
-					itemDimension={screenSize == 'small' ? 200 : 120}
 					songs={nextStepQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 						.map((song) => ({
 							albumCover: song.cover,
@@ -67,7 +66,6 @@ const HomeView = () => {
 					<Box flex={{ md: 1 }}>
 						<SongCardGrid
 							heading={<Translate translationKey='recentlyPlayed'/>}
-							itemDimension={screenSize == 'small' ? 200 : 120}
 							songs={playHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 								.map((song) => ({
 									albumCover: song.cover,
@@ -94,7 +92,6 @@ const HomeView = () => {
 				</HStack>
 				<Box style={{ width: '100%' }}>
 					<SongCardGrid
-						itemDimension={screenSize == 'small' ? 200 : 120}
 						heading={<Translate translationKey='lastSearched'/>}
 						songs={searchHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId))
 							.map((song) => ({